大前端系列之monorepo调研

[jiefancis]

monorepo解决了什么问题？

• 代码复用（包括业务组件(库)、全局状态流、utils工具库等）

• 共享配置（项目开发配置，新项目不需要再进行项目配置）

• npm包也可以实现业务组件库的代码复用问题，为何要选择monorepo呢？ 借鉴reference中提到的，业务组件库是跟业务强相关，在其它项目可能无法复用，所以考虑monorepo方式。

如何搭建monorepo？

lerna init初始化项目

• packages

• package.json：其中，private：true，表示项目不能发布而是packages下的子项目发布

  创建子项目

• lerna create project-name

  packages所有子包的依赖提取到公共root(这里是monorepo文件夹)目录下

• lerna clean 先删除所有子包的node_modules依赖

• lerna boostrap --hoist（子项目中都有各自node_modules依赖）

  yarn workspaces

• 为何要引用workspace?

  • lerna boostrap --hoist 将子项目使用的同一依赖最多次数的版本移动至顶层：

    • 1、先在每个子项目运行npm install，等所有依赖安装好后，将他们移动至顶层的node_modules。
    • 2、lerna对于不同子项目中是否是同一依赖是以字符串为对比规则，如果同一依赖版本号不同，最后提取到顶层的依赖的版本则是子项目中使用次数最多的版本号。

  • yarn workspace 检查每个子项目里面依赖极其版本，版本不一样则会留在子项目自己的node_modules里面。完全一样的依赖才会提升至顶层。

  如何启动子项目？

• 到每个子项目目录中yarn start（子项目有自己的项目依赖，不是sdk模式中无node依赖，需要添加node子进程）

• lerna run [script] lerna帮助我们到每个子项目中去执行 npm/yarn（取决于lerna.json中的npmClient的配置） run [script]指令

• 单独运行一个子项目 lerna --scope sentry-browser run build。执行sentry-browser目录下的scripts:{build}脚本指令。--scope来指定在sentry-browser子项目下运行。sentry-browser是package.json文件中的name属性值

• 在monorepo目录中增加scripts脚本文件夹，引入node子进程实现打包构建逻辑。并在monorepo/package.json文件中增加scripts 脚本指令指明如何运行和构建子包

  如何发布项目？

  • lerna publish他会自动更新内部依赖，并更新各个子项目自己的版本号。

  如何引用？

• 在子项目A中dependencies字段中添加子项目B的package.json文件中的name属性值指明依赖项。

清理环境

lerna clean # 清理所有packages的node_modules目录，不能删除根目录的node_modules yarn workspaces run clean # 执行所有package的clean操作（应是需自行写脚本）

learn clean

• 清理之前依赖包已经被安装到各个 package 下的依赖

安装依赖

• 一般分为三种场景

  • 给某个 package 安装/删除依赖 yarn workspace packageA add/remove packageB [packageC -D] //为 packageA 安装/删除 packageB、C 依赖

  • 给 root 安装/删除依赖，一般的公用的开发工具都是安装在 root 里，如 typescript yarn add typescript -W -D

  • 给所有 package 安装/删除依赖

reference

使用mono-repo实现跨项目组件共享