Yarn 2的Monorepo开发实践

[zhangyu1818]

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 version
function 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打包。