导航
导航
文章目录
  1. lerna
    1. 安装
    2. 基本命令
  2. 重构的价值

Monorepo的实践落地

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

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

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

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

仓库地址

lerna

lerna 官方的定位:A tool for managing JavaScript projects with multiple packages(一个用来管理带有多个package的JavaScript项目)。

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

安装

1
2
3
npm install lerna –g
//
yarn add lerna global

基本命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// lerna 项目初始化
lerna init // 固定模式
lerna init -i // 独立模式

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

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

// 安装所有依赖
lerna bootstrap

// 发布
lerna publish

重构的价值

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

1
2
3
4
5
6
7
8
9
10
11
// 之前的代码目录
├── package.json
├── README.md
├── tool // 项目打包编译配置
├── release // 打包目标文件夹
└── src // 源代码
├── css
├── html
├── images
├── js
└── sass

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

1
2
3
4
5
6
7
8
9
// 重构后的代码目录:
├── ... // 其它配置文件(代码规范)
├── package.json
├── README.md
├── lerna.json // lerna 配置文件
└── packages // 分割的小项目
├── components
├── utils
├── ... // 多个业务模块

总结一下:

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

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

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