前后端一起跑 | Day 3本文解决了在 Monorepo 下同时运行两个及多个分包的问题，并添加了一些前后端的基础代码

首先，创建一下 client 中的文件，如下所示：

client
|-- README.md
|-- index.html
|-- jsconfig.json
|-- package.json
|-- public
|   `-- vite.svg
|-- src
|   |-- App.vue
|   |-- assets
|   |   `-- vue.svg
|   |-- components
|   |   `-- HelloWorld.vue
|   |-- main.js
|   `-- style.css
`-- vite.config.js

这里参考了 vite 的官方模板内容，增加了 jsconfig.json 文件，内容如下：

{
  "compilerOptions": {
    "target": "ESNext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ],
      "~/*": [
        "./*"
      ]
    },
    "allowJs": true
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

这个文件的主要作用是帮助 VSCode 理解项目的结构，提供智能提示、代码导航和错误检查等功能。

接着，安装依赖。因为后端部分也会用到 vite ，所以将其安装到主包：

pnpm add -w -D vite

然后安装前端需要的另外两个依赖：

pnpm add -F @fss/client vue
pnpm add -F @fss/client -D @vitejs/plugin-vue

安装完成后，到总包的 package.json 中注册前端分包的一些命令：

{
    //...,
    "scripts": {
        // ...,
        "client:dev": "pnpm -F @fss/client dev",
        "client:build": "pnpm -F @fss/client build",
        "client:preview": "pnpm -F @fss/client preview",
    }
}

至此，可以从总包路径下直接运行前端代码。

我们再到后端的分包中创建文件，结构如下：

server
|-- README.md
|-- jsconfig.json
|-- package.json
|-- src
|   `-- main.js
`-- vite.config.js

jsconfig.json 内容与前端分包的一致。

src/main.js 文件中编写一段基础的 Koa 代码：

import Koa from 'koa'

// 实例化一个 Koa
const app = new Koa()

// 控制台打印请求
app.use(async (ctx, next) => {
  await next()
  const rt = ctx.response.get('X-Response-Time')
  console.log(`${ctx.method} ${ctx.url} - ${rt}`)
})

// 返回时间中间件
app.use(async (ctx, next) => {
  const start = Date.now()
  await next()
  const ms = Date.now() - start
  ctx.set('X-Response-Time', `${ms}ms`)
})

// 返回内容
app.use(async (ctx) => {
  ctx.body = 'Hello World'
})

// 如果在生产环境直接让实例监听 3000 端口
if (import.meta.env.PROD) {
  app.listen(3000, () => {
    console.log('server is running, listen on 3000')
  })
}

// 导出一个特殊变量交给 vite 在开发时使用
export const viteNodeApp = app

vite.config.js 文件的内容如下：

import { defineConfig } from 'vite'
import { VitePluginNode } from 'vite-plugin-node'

export default defineConfig({
  plugins: [
    ...VitePluginNode({
      adapter: 'koa',
      appPath: './src/main.js',
      exportName: 'viteNodeApp',
      initAppOnBoot: false,
      tsCompiler: 'esbuild',
    }),
  ],
  server: {
    port: 3000,
    hmr: true,
  },
  build: {
    target: 'esnext',
    minify: true,
    rollupOptions: {
      output: {
        format: 'es',
        entryFileNames: 'app.js',
      },
    },
  },
})

文件设置好后，安装依赖：

pnpm add -F @fss/server koa
pnpm add -F @fss/server -D vite-plugin-node@3.1.0

vite-plugin-node 的最新版本是 4.0.0 。但其打包的产物是 cjs ，即使设置了 rollup 的输出格式，也仍然是 cjs，尚不确定该问题是什么导致的。笔者持续跟踪中，有新的进展会及时跟进。相关 Issue

后端的 preview 命令与前端的不同：

{
    // ...,
    "scripts": {
        // ...,
        "preview": "node dist/app.js"
    }
}

同样地，将后端命令注册到主包：

{
    //...,
    "scripts": {
        // ...,
        "server:dev": "pnpm -F @fss/server dev",
        "server:build": "pnpm -F @fss/server build",
        "server:preview": "pnpm -F @fss/server preview",
    }
}

至此，前后端的基本命令和开发代码结构的雏形就设置完毕。

但这时面临一个问题——无法直接在同一个终端 session 中即同时运行两个分包的命令，又无法在同一个终端中显示两者的 log.

这时，需要借助一个工具：concurrently

先将其安装到主包：

pnpm add -w -D concurrently

然后，在主包的 package.json 中注册：

{
    // ...,
    "scripts": {
        "dev": "concurrently -n Server,Client -c bgBlue,bgCyan \"pnpm server:dev\" \"pnpm client:dev\"",
        // ...,
    }
}

最终，能通过 pnpm dev 同时启动前后端的开发时，效果如下图所示：

源码

完整仓库

本文相关 commit