引言#

经常做全栈的小伙伴们都知道，写完后端看效果要dev，写完前端看效果也要dev，那么有没有一劳永逸的解决方案呢？

比如说我的项目：

前端是一坨React

后端是一坨 Typescript

而前端要用 Vite 来 Dev

那么后端还要使用 Wrangler 来 Dev

那么如果我们想要测试，就需要把前后端的dev一起拉起来，对吧？

但是不知道为什么，在今天之前，我都是用一种很奇妙的方法来做这件事的，那就是

我先Build前端，然后让后端把前端build后的产物作为静态路由

这会导致一个问题，由于最终是 Wrangler 起的 Dev，那么后端自然是可以热重载的了，那么前端呢？

在曾经，我改一次前端，就要 rebuild 一下，但是现在，我们有一个更好的解决方案，那就是：

concurrently !

它是一个能给前端 + 后端的 Dev 同时拉起来，这样，我们就同时得到了前后端的热重载，我们只需要专心的去改代码，网页会实时呈现效果

正式开始#

首先，安装 concurrently 的 npm 包

1
npm install -D concurrently

接下来配置 package.json 。意为：调用 concurrently 工具同时运行 npm run dev:frontend 和 npm run dev:backend

dev-remote 是用来连接远程 D1 SQL 进行开发调试的

1
    "scripts": {
2
        "build:frontend": "vite build --config frontend/vite.config.ts",
3
        "dev:frontend": "vite --config frontend/vite.config.ts",
4
        "dev:backend": "wrangler dev",
5
        "dev:backend-remote": "wrangler dev --remote",
6
        "deploy": "npm run build:frontend && wrangler deploy",
7
        "dev": "concurrently \"npm run dev:frontend\" \"npm run dev:backend\"",
8
        "dev:remote": "concurrently \"npm run dev:frontend\" \"npm run dev:backend-remote\"",
9
        "start": "npm run build:frontend && wrangler dev",
10
        "test": "vitest run",
11
        "cf-typegen": "wrangler types"

最后，我们需要设置一下 Vite 的 Proxy ，将 /api 也就是后端的请求转发给 Wrangler ，配置 Vite 配置文件的 server 块

1
    server: {
2
        fs: {
3
            allow: ['..']
4
        },
5
        proxy: {
6
            '/api': {
7
                target: 'http://localhost:8787',
8
                changeOrigin: true
9
            }
10
        }
11
    }

然后，我们就可以使用一条命令，同时拉起前后端的 Dev ，并且都支持热重载

1
npm run dev