NodeJS：Lerna —— Monorepo 的最佳实践

1. Monorepo and Multirepo？

Monorepo 和 Multirepo 是两种不同的源码管理理念，Monorepo 是把所有的相关项目都放在一个仓库中（例如：React, Angular, Babel, Jest, Umijs, ...），Multirepo 则是按模块把子项目拆分到多个仓库中（例如：Rollup, ...）。前者允许多元化发展（各项目可以有自己的构建工具、依赖管理策略、单元测试方法），后者希望集中管理，减少项目间的差异带来的沟通成本。

示例1：React 采用 Monorepo 结构组织项目代码

示例2：Babel 也采用 Monorepo 结构

Multirepo 缺点：

• repo不好找，如果你有很多子项目repo、仓库又很分散、相关负责人又请假了....呵呵；
• Issue 不知道往哪里提，项目管理混乱。
• 版本管理的日常开销大....

Monorepo 优点：

• 单个的lint，build，test和release流程。
• 统一的地方处理issue。
• 不用到处找项目的repo。
• 方便管理版本和依赖管理。
• 跨项目的操作和修改很容易。
• 方便统一生成 ChangeLog。

Monorepo 缺点：

• repo 体积变大。
• 需要额外的工具实现项目间的联合调试（例如：Jest 的 watch.js，监听子项目中文件的变化，动态编译）。
• 由于项目间的依赖通过符号链接（快捷方式）实现，对打包工具有比较高的要求。
• 多个项目集中到一起后，常用的 IDE 可能会遇到麻烦（Facebook 就自己造了IDE

）。

图文无关

2. Lerna 是啥？

Lerna is a tool that optimizes the workflow around managing multi-package repositories with git and npm. Lerna 就是用来协助管理 Monorepo 型项目的工具；

下面两张图展示了

基于 Lerna 的 Monorepo 最大优势

图：传统 Multirepo 结构项目的 bug 修正流程

图：基于 Lerna 的 Monorepo项目结构

图文无关

下面给大家展示一个

基于 Lerna 的 Monorepo 项目

完整的构建、开发、发布流程

深刻体会它的优势

3.1. Monorepo 项目搭建

采用 Monorepo 结构

各子项目代码结构最好统一

1. 各子项目，源码入口统一为 src/index.js；
2. 各子项目，编译出口统一为 build/index.js；
3. 各子项目，IDE 辅助提示统一为 build/index.d.ts；
4. 各子项目，基于 ES6 语法、使用 Babel 编译；

• 01. 创建新项目，添加 .gitignore；

图：配置 .gitignore

• 02. 全局安装 lerna；

npm install -g lerna

• 03. 初始化 lerna 项目；

lerna init

图：lerna init 命令

图：Monorepo目录结构说明

3.2. 向 packages 目录添加子项目

1. 各子项目，源码入口统一为 src/index.js；
2. 各子项目，编译出口统一为 build/index.js；
3. 各子项目，IDE 辅助提示统一为 build/index.d.ts；
4. 各子项目，基于 ES6 语法、使用 Babel 编译；

图：packages 目录中的子项目

• 构建各子项目间的依赖关系；

lerna bootstrap

图：lerna bootstrap 命令

图：lerna bootstrap 连接后效果

3.3. 编写统一构建、监控工具

图：监控脚本代码示例

图：npm scripts 示例

图：监控脚本运行效果

参考：

《Repo Style Wars: Mono Vs Multi》： http://www.gigamonkeys.com/mono-vs-multi/ 《Why is Babel a monorepo?》： https://github.com/babel/babel/blob/master/doc/design/monorepo.md 《Advantages of monorepos》： https://danluu.com/monorepo/ 《New wave modularity with Lerna, monorepos, and npm organizations》： https://macwright.org/2016/07/08/lerna-npm-organizations-new-wave-modularity.html 《syncpack 小工具》： https://github.com/JamieMason/syncpack Lerna git 仓库： https://github.com/lerna/lerna