Monorepo的实践落地

前言：最近针对项目代码仓库进行了一次重构，之前代码管理缺少规范和模块化的思想，也是借着项目重构这次机会重新规划代码仓库，实践落地了一种新的项目管理方式——Monorepo，Monorepo的管理概念跟我们规划的项目代码管理非常贴合，再加上我们新增的组件库及工具库，打造了一套比较完整的工作流。

一些概念性的的东西这里就不多说了，不太了解 Monorepo 的可以自行 google 一下，这里就默认已经了解过了。

要想从零开始定制一套完善的 Monorepo 的工程化工具，还是一件比较有难度的事情。不过社区已经提供了一些比较成熟的方案，我们可以拿来进行定制。

在重构方案选择上，我们选择了业界比较成熟的 lerna 和 yarn workspaces，用 yarn 来处理依赖问题，用 lerna 来处理发布问题。

仓库地址

lerna

我们看一下 lerna 官方的定位：A tool for managing JavaScript projects with multiple packages（一个用来管理带有多个package的JavaScript项目）。

lerna不负责构建，测试等任务，它提出了一种集中管理package的目录模式，提供了一套自动化管理程序，让开发者不必再深耕到具体的组件里维护内容，在项目根目录就可以全局掌控，基于 npm scripts，使用者可以很好地完成组件构建，代码格式化等操作。

安装

npm install lerna –g
//
yarn add lerna global

基本命令

// lerna 项目初始化
lerna init // 固定模式
lerna init -i // 独立模式

// 创建子项目
lerna create [包名]

// 清除所有子项目的依赖
lerna clean

// 安装所有依赖
lerna bootstrap

// 发布
lerna publish

重构的价值

之前的代码管理非常的混杂，还是比较传统的代码目录结构，一些公共基础服务无法扩展复用，如下：

// 之前的代码目录
├── package.json
├── README.md
├── tool // 项目打包编译配置
├── release // 打包目标文件夹
└── src // 源代码
    ├── css
    ├── html
    ├── images
    ├── js
    └── sass

重构后的代码结构无论是模块化还是复用性都很清晰，同时在代码规范上也比之前更规范了，如下：

// 重构后的代码目录：
├── ... // 其它配置文件（代码规范）
├── package.json
├── README.md
├── lerna.json // lerna 配置文件
└── packages // 分割的小项目
    ├── components
    ├── utils
    ├── ... // 多个业务模块

总结

• 将之前混杂的代码库分割为独立版本控制的小项目（项目更清晰）
• 解决了包之间的依赖关系（新增了组件库以及工具库）
• 通过git仓库检查到改动并自动同步（公共基础库的发布）
• 根据提交的commit生成CHANGELOG版本日志文件（项目代码更规范）
• TypeScript支持
• 统一技术栈
• 完善的工作流

当然，lerna 还有更多的功能可以去发掘，还有很多可以结合 lerna 一起使用的工具。构建一套完善的仓库管理机制，可能它的收益不是一些量化的指标可以衡量出来的，也没有直接的价值输出，但它能在日常的工作中极大的提高工作效率，解放生产力，节省大量的人力成本。

下篇就来聊聊组件库的那些事。