阅读 577

Yarn 2的Monorepo开发实践

Monorepo是指单仓库多包管理,目前是比较常见的一种包管理方式,比如ReactVueBabel都是采用的这种管理方式。

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

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

我的仓库地址

yarn2的安装

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

在项目目录中执行

yarn set version berry
复制代码

berryyarn2的代,执行这个命令后项目会切换到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作为依赖添加到componentspackage.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 有自带的多包版本管理,所以我还是根据vuerelease脚本来做的。

// 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后,子包会自动被linknode_modules,打包的时候,可能会找到node_modules里对应link后的包main字段的文件。

如果我们的子包main字段都为lib/index.jsa包依赖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打包。

文章分类
前端
文章标签