一、什么是 Monorepo
Monorepo 是管理项目代码的一个方式，指在一个项目仓库 (repo) 中管理多个模块/包 (package)，不同于常见的每个模块建一个 repo。
|── packages|
| ├── pkg1|
| | ├── package.json|
| ├── pkg2|
| | ├── package.json
|── package.json
二、使用 Yarn Workspaces 实现一个简单的 JS Monorepo 项目
创建项目目录
创建一个名为 monorepo 的文件夹
mkdir monorepo
初始化项目
在 monorepo 目录下初始化 yarn
yarn init
此时 monorepo 目录下应出现 package.json 文件
配置 Yarn Workspaces
在 /monorepo/package.json 文件中修改代码如下
{
"name": "monorepo",
"version": "1.0.0",
"license": "MIT",
"private": true,
"workspaces": [
"packages/*"
],
}
private:true：定义了本项目为私有项目，在使用 yarn workspace 时需要始终将 private 属性设置为 true。
workspaces：定义了每个 package 的位置。在本项目中，我们将会把每个 package 放在 packages 目录下。注意该属性为字符串数组，我们可以根据自身项目情况添加多个位。
创建 packages 目录
在 monorepo 目录下创建 packages 文件夹，用于存放我们的 packages
mkdir packages
初始化 package-a
在 /monorepo/packages/ 目录下，创建文件夹 package-a，同时 yarn 初始化
cd packages
mkdir package-a
cd package-a
yarn init
我们可以遵循 monorepo 命名惯例，在 package.json 中将其命名为 @monorepo/package-a
开发 package-a
此时，我们已经可以开始对 package-a 进行开发了。
作为演示，我们可以在 package-a 下新建 main.js 文件，并添加如下代码
// index.js
console.log("这是 package-a");
初始化 package-b
在 /monorepo/packages/ 目录下，创建文件夹 package-b，同时 yarn 初始。
步骤同 package-a
开发 package-b
此时，我们已经可以开始对 package-b 进行开发了。
作为演示，我们可以在 package-b 下新建 main.js 文件，并添加如下代码
// index.js
console.log("这是 package-b");
在 package-b 中引用 package-a
Monorepo 一大优势是在同一 monorepo 项目下的不同 packages 可以相互引用。
假设我们的 monorepo 项目下有3个 react app。每个 react app 均需要一个相同的折线图组件。此时我们可以：
- 每个 react app 分别开发各自的折线图组件。但这造成了重复劳动、且今后会同时维护三个折线图组件。
- 先在一个 react app 开发出来折线图组件，随后剩下两个 react app 照搬照抄。这样虽然解决了重复开发的>问题，但当折线图组件需要变动时，还是需要维护三个 react app 的折线图组件。
- 创建一个折线图的 package，在三个 react app 中引用该 package。这样，我们只需要开发和维护该折线图 package 即可。
首先，我们需要在 /monorepo/packages/package-b/package.json 中添加 package-a 的依赖。
{
"name": "@monorepo/package-b",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"dev": "node index.js"
},
"dependencies": {
"@monorepo/package-a": "1.0.0"
}
}
然后在 /monorepo/packages/package-b/index.js 下引用 package-a
// index.js
require("@monorepo/package-a");
console.log("This is package-b");
注意，此时如果运行 package-b 下的 index.js 会出现错误，这是因为我们虽然在 dependencies 中引用了 package-a，但我们还未安装该 package。因此，我们需要运行yarn或者yarn install。
此时，我们再运行 package-b 下的 index.js 文件，我们可以看到如下输出
$ node index.js
This is package-a
This is package-b
三、引入 TS 以及 React
下面，让我们来在该 monorepo 项目中引入 TS 以及 React
创建 React App
在 /monorepo/packages 目录下，执行
yarn create react-app client --template typescript
随后，可以进入 client 目录启动 react 来确认是否安装成功
cd client
yarn start
创建 Interface package
假设我们用 TS 做全栈开发，一个常见的需求就是前后端 API 的 interface 最好可以共享。
因此这里我们创建一个 package 来共享 interface
首先，我们在 /monorepo/packages/ 目录下新建文件夹 interface
mkdir interface
然后，我们在 interface 下初始化 yarn 项目 yarn init
随后，我们初始化 TS 项目 tsc --init
我们修改 tsconfig.json "declaration": true "outDir": "./dist" "rootDir": "./src"
最后我们修改 package.json 文件如下
{
"name": "@monorepo/interface",
"version": "1.0.0",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"license": "MIT",
"scripts": {
"build": "tsc"
}
}
开发 interface package
在 interface 目录下，我们可以创建 src 目录，并在 src 目录下创建 index.ts
在 index.ts 内声明一个 interface
// index.ts
export interface MyAPIResponse{
msg: string
}
此时，我们在 interface 目录下将 TS 代码转成 JS 代码 yarn build
我们可以看到 interface 目录下新出现一个 dist 文件夹，用于保存我们 build 好的 JS 文件。
在 React 项目中引用 interface package
在 react 项目中的 package.json 内添加依赖
"@monorepo/interface": "1.0.0"
随后安装依赖 yarn 或者 yarn install
这样我们就可以在 React 项目中引用 interface package 里面定义的 interface 了。如在 src/App.tsx 中
import { MyAPIResponse } from "@monorepo/interface";
四、nohoisting 以及全局 package
nohoisting
monorepo 中所有的依赖都会储存在根目录下的 node_modules 中，既：/monorepo/node_modules
但某些情况下，我们可能需要同一 package 的不同版本。例如：一个 react 项目较老，使用 bootstrap 4。而另一个在开发中的新项目决定使用 bootstrap 5。
此时我们需要修改根目录下的 package.json 文件
{
"name": "monorepo",
"version": "1.0.0",
"license": "MIT",
"private": true,
"workspaces": {
"packages": [
"packages/*"
],
"nohoist": [
"**/bootstrap"
]
}
}
可以看到，我们的 workspaces 新增了 nohoist 属性，我们可以在这里添加不需要共享的 packages 的名称。
安装全局 package
在开发项目过程中，我们也许需要 prettier 等工具帮我们格式化代码，这时，我们可以在根目录下安装 prettier
yarn add prettier -W
这里我们使用 W flag 来让 yarn workspace 在根目录下安装依赖。
五、总结
本文介绍的 yarn workspaces monorepo 的一些基本概念以及实现方式。
在实际工作中，可以结合 lerna 等其他工具一起搭建我们的 monorepo 项目。
