[大前端] 基于 yarn workspaces 的 monorepo 实践

什么是 monorepo

使用 Yarn Workspace

1. 初始化项目

新建文件夹，运行 yarn init，可以看到生成了一些文件。主要看 package.json：

{
  "name": "monorepotest",
  "packageManager": "yarn@3.3.0"
}

切换 yarn 的版本至 yarn 2：yarn set version berry，此时会在项目目录里生成一个 .yarn 文件夹，目录结构如下：

└───.yarn
    └───releases
            yarn-3.3.0.cjs

如果你的网不好，可以设置 yarn 使用代理服务器（前提是你得有个代理服务器。）
yarn config set httpProxy http://host:port
yarn config set httpsProxy https://host:port

2. monorepo 项目结构

新建 packages 目录（或者其他任意名称），用来放子项目。在 package.json 文件中添加一行。

"workspaces": ["packages/*"],

这一行的作用是告诉 yarn 你的子项目有哪些。当然你也可以在这个数组里面写每一个子项目的相对路径。

如果项目目录下没有 .yarnrc.yml 就新建一个，这是这个项目里面 yarn 的配置文件。
yarn 默认使用的 nodeLinker 是 pnp，不过这玩意在我跑 vue3 + element-plus 项目的时候跑不起来，报了一堆错误 Could not resolve "@vue/xxx"，最后还是改回了 node-modules。

# .yarnrc.yml 加一行
nodeLinker: node-modules

3. 安装 yarn workspaces 插件

yarn plugin import workspace-tools

这个插件增加了两个管理 workspaces 的命令，很好用。

4. 子项目间的依赖

创建一个 vue 项目和一个 js/ts 项目。

└───packages
    ├───pure-ts
    └───vue-project

其中 pure-ts 项目运行了 yarn init 就行了。其中的文件如下：

└───pure-ts
    │   package.json
    │   README.md
    │
    └───say
            index.ts

say/index.ts 里的代码：

export function world() {
    console.log('hello world!')
}

如果 vue-project 项目需要引用 pure-ts，修改 vue-project/package.json，在 dependencies 里添加一个依赖："pure-ts": "workspace:*"。
workspace:* 的意思可以看yarn 官方文档，* 号的大致意思是在打包时自动在 workspace 中找对应的版本。你也可以指定某个打包发布的版本，比如说 "workspace:^1.2.3"。

再执行 yarn install 或 yarn 之后，你就可以在 vue-project 中愉快的使用 pure-ts 了。

import { world } from "pure-ts/say"
world()

5. 打包

还记得我们装的 workspace-tool 插件吗？打包所有的子项目用的就是这个插件提供的命令。

yarn workspaces foreach run build

前提是要打包的项目的 package.json 里要有 build script。
还可以把这个命令写到项目根目录的 packages.json 里：

"scripts": {
    "build": "yarn workspaces foreach run build"
}

2022-12-05

阿征DNA