Monorepo是指单仓库多包管理，目前是比较常见的一种包管理方式，比如React、Vue、Babel都是采用的这种管理方式。

使用yarn的workspace来管理多包仓库，相对lerna管理来说配置会简单一些。

yarn的workspace会将仓库里的依赖通通放在根目录的node_modules里，这样比如eslint、tsconfig，prettier都能作用于子仓库。

我的仓库地址

yarn2的安装

yarn2增加了无node_modules的功能，额外增加了一些命令和插件机制，在Monorepo仓库中，yarn2可以自动替换各个子包相互依赖的版本号。

在项目目录中执行

yarn set version berry

berry是yarn2的代，执行这个命令后项目会切换到yarn2管理。

yarn set version latest

更新yarn2版本。

yarn plugin import workspace-tools

安装yarn2的workspace插件，这个插件可以增加对workspace的命令操作。

因为yarn2多了一个无node_modules的功能，但是这个感觉不是很好用，所以还是需要node_modules。

修改.yarnrc.yml。

nodeLinker: node-modules

同时yanr2会多一些额外的文件，我们需要把它们放进.gitignore。

.yarn/cache.yarn/unplugged.yarn/build-state.yml.yarn/install-state.gz

设置workspace

根目录创建packages文件夹放置子包。

package.json中配置workspace的目录为packages目录下的所有包。

"workspaces": [	"packages/*"]

子包的操作

在packages目录中新建一个目录，比如叫components。

packages├── components

在packages/components目录下执行yarn init -y来初始化。

根路径执行 yarn workspaces list，会输出当前包的列表。

添加依赖

项目根目录执行

yarn workspace components add -D react

将React作为依赖添加到components的package.json中，但是实际依赖是装在根目录的node_modules里。

子包间的相互依赖

子包间可能会存在依赖关系。

packages├── components├── shared

现在components包会依赖shared包，我们需要在components包中的package.json中添加配置。

{  "name": "components",  "dependencies": {    "shared": "workspace:*"  }}

workspace:*表示在components包执行npm publish的时候，会自动将shared的版本更换为shared包的版本。

tsconfig的配置

只需要用一个tscofnig配置文件，就能管理所有子包的ts配置，额外需要配置的是paths字段，这样开发的时候ts才不会报找不到包的错。

{  "compilerOptions": {    "paths": {      "components": ["packages/components/src"],      "shared": ["packages/shared/src"]    }  }}

如果你的子包命名是像vue一样，就简写配置。

"paths":{  "@vue/*": ["packages/*/src"]}

版本管理

我没有找到yarn2 有自带的多包版本管理，所以我还是根据vue的release脚本来做的。

// scripts/release.js// 找到所有的包const packages = fs  .readdirSync(path.resolve(__dirname, '../packages'))  .filter((p) => !p.startsWith('.'))function updateVersions(version) {  // 更新root package.json version  updatePackage(path.resolve(__dirname, '..'), version)  packages.forEach((p) => updatePackage(getPkgRoot(p), version))}// 更新每个子包的package.json versionfunction updatePackage(pkgRoot, version) {  const pkgPath = path.resolve(pkgRoot, 'package.json')  const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'))  pkg.version = version  fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n')}updateVersions('1.0.0');

打包📦

打包会相对复杂一些，像vue是使用的rollup来自己写的配置打包，并且需要找到包路径循环执行命令。

yarn2可以省略循环操作，如果每一个子包都有build命令，则根目录执行yarn workspaces foreach run build，yarn会帮我们在每一个包路径执行build命令。

需要注意的是由于包之间有相互依赖关系，我们在根目录执行yarn后，子包会自动被link进node_modules，打包的时候，可能会找到node_modules里对应link后的包main字段的文件。

如果我们的子包main字段都为lib/index.js，a包依赖b包，打包时则会找到node_modules/b/lib/index.js，但是如果这时候b包没有执行打包就会找不到入口文件报错，所以在打包过程中也是有先后顺序的，需要先打b包，再打a包。

我写了一个简单的CLI工具来打包commonjs的代码。

cjsb --packages packages/b packages/a

根目录执行后，会先对packages/b打包，再对packages/a打包，也不需要每个包都有build命令了。

结语

这是我使用yarn2 workspace的一次简单实践。

如果觉得麻烦其实也可以用一些现有的工具，比如lerna管理+father打包。