Monorepos.2022你该知道的

509 阅读4分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路

image.png 你上一次想知道monorepo发展的怎么样了是什么时候?
Lerna仍然是最好的选择吗?还是Yarn Workspaces已经够用了?

我研究了一段时间,有不少东西我想要分享给你。

前置信息

首先,什么是Monorepo呢? Wikipedia 的解释 First of all, what does the Monorepo mean?
Wikipedia says

什么时候你需要在开发的时候使用monorepo?

想象下面的场景: Imagine the situation:

  • 你自己有几个库,几个项目
  • 它们都分散在不同的git仓库里
  • 你的项目会用到你自己的一些库
  • 然后你会持续的开发迭代你自己的库(可能因为它需要在别的项目里集成)

这个场景是很常见的吧 :)

那么这个场景你该怎么处理呢

1. 最坏的情况

你把你的“半成品”的库发布。加入你项目的package.json,作为依赖。然后你修复了一些问题,你重新发布它们,修改package.json里的版本号,重新yarn install... 无限重复这个过程,只要你有更新东西。

如果你有类似的经历,请继续往下看 👉

2. 不错的处理方式

你使用 yarn link。那么你可以直接进行集成测试你的库,不需要每次都发布包,更新包。

这里的主要问题是什么呢?你忽略一些东西,当你的包越来越多。你还得记得yarn unlink 当你联调结束,把包发布了。同时你还得注意你发布、linked的版本号。虽然编辑器会提示你哪个包link在你的node_modules里,但是它还是挺容易忘记的。当越来越多的包要进行依赖的时候,管理就变得困难起来了。

3. 最好的解决方案(个人意见)👍

你可以使用monorepo。所有包被存在一个git仓库里,每个包都有自己的package.json,并且相互关联。开发和管理变得简单。当你开发完了,你可以一个个包发布出去。不用做yarn link/unlink之类的操作了。

将而言之,下面是适合monorepo的场景:

  • 你想要更简单的管理仓库We want a bit simplest code base management
  • 你想要一个大仓库管理很多项目和依赖包
  • 你有几个依赖包是被很多项目使用的
  • 你不想处理yarn link,需要直接用项目调试你的包。
  • 你想要灵活的版本控制,发布和变更日志。

让我们看看2020有哪些monorepo供我们选择

yarn / npm Workspaces.
它相对原始简单。实际上如果你只想要link或安装下依赖,它还是够的。

✅ 链接依赖 ❌ 包自动发布(除非自己写脚本) ❌ 版本自动管理

Lerna (⭐️ 31.4k) ✅ 链接依赖
✅ 跨包命令
✅ 包自动发布
✅ 版本自动管理
❌ 缓存

Turborepo (⭐️ 5.3k)
✅ 链接依赖
✅ 跨包命令
❌ 包自动发布 (可以通过 complimentary tools)
❌ 版本自动管理 (可以通过 complimentary tools)
✅✅ 缓存

NX (⭐️ 10.3k)
✅ 不仅仅是monorepo工具
❌ 包自动发布
❌ 版本自动管理
❌ 相对更复杂

BIT (⭐️ 14.6k)
✅ 不仅仅是monorepo工具
✅ 适合微前端

在继续后面的内容前,希望你先了解下NX

  • 这个项目有很好的代码生成工具,提供了一致的开发体验对于任何框架
  • 当你想要加个包到monorepo,NX会问你它的定位。比如React 应用,react包,react组件。基于你的选择NX会生成合适config。
  • 它真的快

我有种感觉,NX是有点东西的。可能我还没在我的项目里找到合适的场景,所以还不是特别深入的了解。同时,我的项目使用NX也有点困难。

但仅限于我的经验。

所以目前对我最合适的是TURBOREPO

下面是一些我觉得挺重要的优点:(你可以在这里看到完整的列表 documentation)

增量构建
一次性构建是很痛苦的,Turborepo会记住你编译过的内容,跳过那些已经计算过的部分。

内容哈希
Turborepo是根据文件内容而不是文件更新时间来决定哪些要重新构建。

远程缓存
可以把构建缓存分享给同事或者CI/CD工具,来使构建更快。

并行执行
构建会使用最多的cpu核数来并行构建。

任务管线
自定义任务的关联,让Turborepo优化构建时机。

构建信息展示
生成构建信息文档,导出浏览器查看以分析构建过程。

最后,看点数据

之前我是使用lerna的,所以这里是和lerna做个比较
我的monorepo包含一个react应用和13个包。其中一个是包含102个react组件的UI库 My monorepo contains one React application and 13 packages. One of the packages is the UI Library Kit which contains 102 React components

build-packages — 构建所有package除了react应用
build-app — 构建所有package和应用

image.png

以上,欢迎讨论。