Vite 与 Rust 的 Monorepo 前后端联合开发

什么是 Monorepo

Monorepo 从字面上来看就是 Mono（单）和 Repository（仓库），即在一个 Git 仓库中管理多个 Project 或者 Package。

你最常见的 Monorepo 可能是 NPM 上的那些以 @xxxx/yyyy 为名字的库了，如 @types/xxxxx，它们都是用 Monorepo 来进行管理的。

Monorepo 在开发前后端时也是一种不错的管理方式，特别是涉及到前后端分离开发，你可以直接在 Monorepo 中配置构建系统来分别将前端和后端编译后组合打包成服务端。

模板构建步骤

我们主要的目的是将 Vite 项目文件夹和 Rust 项目文件夹合并在一起作为 Monorepo 进行开发，大致可以经过以下几个步骤：

1. 创建 Rust 项目

我们 必须 先创建 Rust 项目文件夹，因为 Cargo 不允许在非空文件夹中创建 Rust 项目。

cargo new example-monorepo --vcs none

此处我们还使用 --vcs none 选项禁止 Cargo 创建 Git 仓库，因为我们需要在整个 Monorepo 模板建立完成之后再使用 Git 仓库来维护。

此时我们的仓库结构如下：

- example-monorepo
  +- Cargo.toml
  +- src
     +- main.rs

2. 移动 Rust 源代码文件夹

Cargo 默认情况下将 src 作为源代码文件夹，而 Vite 同样将 src 作为源代码文件夹，两者会造成冲突。

由于我们此处希望使用 Rust 作为后端开发语言，所以我们希望将 Rust 的源代码文件夹重命名为 src-backend。我们需要修改 Cargo.toml 文件，在其中添加如下段：

[[bin]]
name = "example"
path = "src-backend/main.rs"

需要注意的是，这两个参数是 必须 的，name 指定了编译出来的二进制文件名，path 指定了 Rust 项目的根文件路径。

在重命名 src 文件夹和修改 Cargo.toml 后，我们可以运行 cargo run 来检查修改是否生效，Cargo 应该不会报错。

3. 融合建立 Vite 项目

在配置好我们的 Rust 项目后，接下来我们运行如下命令来建立我们的 Vite 项目：

pnpm create vite

此处我使用的是 PNPM 作为 Node 包管理器，你可以寻找如上命令的其他替代。

我们在当前文件夹中建立 Vite 项目，当然它会弹出警告：

? Current directory is not empty. Please choose how to proceed: › - Use arrow-keys. Return to submit.
❯   Cancel operation
    Remove existing files and continue
    Ignore files and continue

因为当前文件夹中我们已经有配置好的 Rust 项目文件了，所以我们需要选择第 3 个选项来忽略这些存在的文件。接下来就跟正常的建立 Vite 项目一样了。

这时，你的项目文件夹的大致结构应该是这样（我建立的是 Vue 模板）：

- example-monorepo
  +- Cargo.toml
  +- README.md
  +- index.html
  +- package.json
  +- tsconfig.json
  +- tsconfig.app.json
  +- tsconfig.node.json
  +- vite.config.ts
  +- public
  |  +- vite.svg
  +- src
  |  +- App.vue
  |  +- main.ts
  |  +- style.css
  |  +- vite-env.d.ts
  |  +- assets
  |  |  +- vue.svg
  |  +- components
  |     +- HelloWorld.vue
  +- src-backend
     +- main.rs

到这一步其实就已经够了，在 src 中的就是 Vite 代码，当然如果你希望能够把它的名字改成 src-frontend 来与前端相对也可以，只需要修改：

index.html

把：

<script type="module" src="/src/main.ts"></script>

改成：

<script type="module" src="/src-frontend/main.ts"></script>

tsconfig.app.json

把：

  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]

改成：

  "include": ["src-frontend/**/*.ts", "src-frontend/**/*.tsx", "src-frontend/**/*.vue"]

然后运行如下命令来检查 Vite 是否能正常编译（你得先安装完所有的依赖）：

pnpm build

4. 建立 Git 仓库

首先来编写我们需要的 .gitignore 文件：

# Build outputs
dist
target

# Node modules
node_modules

主要就是以上几个需要排除的文件夹，其他的你可以自己添加，之后直接初始化仓库并提交一个根即可：

git init
git add .
git commit

5. 完成

你现在可以分别使用 cargo 和 pnpm 来在同一个文件夹中操作前后端项目的依赖和编译了，你还可以添加更多脚本，如自动打包前后端，Docker 镜像编译等。