Monorepo简介与建设实践

做者：重明前端

Monorepo和Multirepo对比

须要注意一点：monorepo和multirepo不是框架，不是库。是一种管理项目的概念node

monorepo

将全部的模块统一的放在一个主干分支之中管理。不进行分库存储，当有特定的须要的时候进行分支，可是问题修改仍是在主干上操做，并有专门人员合并到分支内容上，在特定需求完结的时候，分支也将会被废弃。git

优势：npm

1.统一的规范，语言，和IDE带来的是结构的完整稳定。json

2.按照统一的标准进行开发，使程序稳定性更良好，更易解读。安全

3.标准化的开发流程，规避不少没必要要的冲突与错误。markdown

缺点：app

1.项目过大，难以管理。框架

2.因为统一的标准，不一样的团队可能须要对于新的规范和IDE进行了解学习，须要时间。微服务

3.修改和开发可能变得繁琐，减慢效率。

multirepo

将项目分化成为多个模块，并针对每个模块单独的开辟一个repo来进行管理。

优势：

1.团队本身的IDE，语言，以及工做步调。

2.模块更小，更易维护。

3.开发效率更高。

缺点：

1.合并困难，每一个模块规范不一样，同步和编译时这些问题将会集体爆发。

2.难以保证稳定性。

3.因为可能存在不一样语言开发，或者不一样IDE的状况，新建或者更新构建变得困难

你们看到multirepo是否是有点眼熟？对了，这个就是微服务的概念。你们多多少少对微服务都有所了解，这里就不展开了，日后能够单独分享

Lerna

Lerna是npm模块的管理工具，为项目提供了集中管理package的目录模式，如统一的 repo 依赖安装、package scripts和发版等特性。

想要初识monorepo上边这句话可能已经一脑壳问号了？不要慌，咱们翻译一下：

问：实现monorepo一共分几步？

答：一共分三步 ---

--- 安装Lerna
--- 使用Lerna （根据Lerna提供的结构放置项目）
--- 提交项目

是否是明白了(╹▽╹)？好！那接下来我们看一下Lerna是怎么使用的

安装Lerna

npm i -g lerna
复制代码

好的，恭喜你完成了第一步！

使用Lerna

经常使用lerna命令

lerna init 建立一个新的lerna库或者是更新lerna版本

lerna add 添加一个包的版本为各个包的依赖

lerna create 新建包

lerna list 列举当前lerna 库包含的包

lerna changed 显示自上次relase tag以来有修改的包，选项通 list

lerna diff 显示自上次relase tag以来有修改的包的差别，执行 git diff

lerna clean 删除各个包下的node_modules

初始化项目

lerna init
复制代码

初始化后，会生成 packages 空目录和 package.json 和 lerna.json 配置文件，配置文件以下:

//package.json
{
  "name": "root",
  "private": true, // 私有的，不会被发布，是管理整个项目，与要发布的npm包解耦
  "workspaces": ["packages/*"], // workspace配置
  "devDependencies": {
    "lerna": "^3.22.1"
  }
}

//lerna.json
{
  "packages": [
    "packages/*"
  ],
  "version": "0.0.0",
  "npmClient": "yarn", // workspace配置
  "useWorkspaces": true // workspace配置
}
复制代码

这里有yarn workspace的命令混入其中，代码中已有标记。它主要是为安装依赖的配置调整。 Lerna的一些操做较平常的操做而言有些蹩手，因此咱们使用workspace来作能更加容易接受

建立npm包

执行命令后可修改包信息，这里建立@monorepo/feihe-project @monorepo/feihe-components 和 @monorepo/feihe-utils

lerna create @monorepo/feihe-project -y
lerna create @monorepo/feihe-components -y
lerna create @monorepo/feihe-utils -y
复制代码

安装依赖

lerna add lodash // 为全部 package 增长 lodash 模块 

// 为 @monorepo/feihe-utils 增长 lodash 模块(lodash可替换为内部模块，如@monorepo/feihe-components)
lerna add lodash --scope @monorepo/feihe-utils 
复制代码

固然也能够在各个package.json中的dependencies或devDependencies添加依赖，也可使用yarn或npm在各包中进行安装，没有强行限制。好比从根目录到packages下全部包执行安装依赖，执行yarn install便可

除此以外，咱们能够将项目内的工具库@monorepo/feihe-utils导入至项目@monorepo/feihe-project中

lerna add @monorepo/feihe-utils --scope=@monorepo/feihe-project
复制代码

在工具库中可直接导出es包，安装依赖后直接使用

执行命令

当咱们须要在根目录执行packages下的scripts命令时能够这样:

yarn workspace @monorepo/feihe-project run dev
复制代码

固然也能够进入但愿执行的目录下执行yarn run dev，都没有问题

清理环境

在依赖乱掉或者工程混乱的状况下，清理依赖

lerna clean # 清理全部packages的node_modules目录，不能删除根目录的node_modules
yarn workspaces run clean # 执行全部package的clean操做（应是需自行写脚本）
复制代码

注意：以上两种清理的是packages的node_modules，不包含根目录，根目录须要自行删除。yarn workspaces run clean你们可能也看出来了，须要每一个package中都在scripts中配置clean命令，因此是否是很坑...

提供一个解决方案：

在根目录的package.json中设置一下

// package.json
{
  "scripts": {
    "clean": "rimraf node_modules & lerna clean -y" // 清理全部依赖
  }
}
复制代码

执行此命令须要安装rimraf包

npm install -g rimraf
复制代码

提交项目

在构建和发布以前还须要作一些关于代码提交的配置

commitizen && cz-lerna-changelog

commitizen 是用来格式化 git commit message 的工具，它提供了一种问询式的方式去获取所需的提交信息。

cz-lerna-changelog 是专门为 Lerna 项目量身定制的提交规范，在问询的过程，会有相似影响哪些 package 的选择。

咱们使用 commitizen 和 cz-lerna-changelog 来规范提交，为后面自动生成日志做好准备。由于这是整个工程的开发依赖，因此在根目录安装：

yarn add commitizen cz-lerna-changelog -D -W
复制代码

安装完成后，在 package.json 中增长 config 字段，把 cz-lerna-changelog 配置给 commitizen。同时由于commitizen不是全局安全的，因此须要添加 scripts 脚原本执行 git-cz

{
  "scripts": {
    "commit": "git-cz"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-lerna-changelog"
    }
  }
}
复制代码

以后在常规的开发中就可使用 yarn run commit 来根据提示一步一步输入，来完成代码的提交。

commitlint && husky

上面咱们使用了 commitizen 来规范提交，但很难靠开发自觉使用 yarn run commit 。万一忘记了，或者直接使用 git commit 提交怎么办？因此在提交时校验提交信息，若是不符合要求就不让提交，并提示。校验的工做由 commitlint 来完成，校验的时机则由 husky 来指定。husky 继承了 Git 下全部的钩子，在触发钩子的时候，husky 能够阻止不合法的 commit，push 等等。

安装 commitlint 以及要遵照的规范：

yarn add -D -W husky @commitlint/cli @commitlint/config-conventional
复制代码

在工程根目录为 commitlint 增长配置文件 commitlint.config.js 为commitlint 指定相应的规范

module.exports = { 
    extends: ['@commitlint/config-conventional'] 
}
复制代码

在 package.json 中增长以下配置

"husky": { 
    "hooks": { 
        "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" 
    }
}
复制代码

"commit-msg"是git提交时校验提交信息的钩子，当触发时便会使用 commitlint 来校验。安装配置完成后，想经过 git commit 或者其它第三方工具提交时，只要提交信息不符合规范就没法提交。从而约束开发者使用 yarn run commit 来提交。

流程简介

git add .

yarn run commit

git push origin xxxx(分支)

打包发布

咱们能够本身构建拓扑排序规则，很不幸的是yarn的workspace暂时并未支持按照拓扑排序规则执行命令,虽然该 rfc已经被accepted，可是还没有实现, 幸运的是lerna支持按照拓扑排序规则执行命令, --sort参数能够控制以拓扑排序规则执行命令

lerna run --stream --sort build
复制代码

OK！收工！欢迎你们持续关注咱们，咱们会保证至少周更1期前端内容，但愿你们能提出宝贵建议，不要成为失联人口啊~