前端工程化之多个项目如何同时高效管理 — monorepo

monorepo 不仅限于前端，但此篇博文只谈前端。

是什么

wikipedia: In version control systems, a monorepo ("mono" meaning 'single' and "repo" being short for 'repository') is a software development strategy where code for many projects is stored in the same repository.

翻译过来就是：在版本控制系统中，monorepo 是一种软件开发策略，其中许多项目的代码存储在同一存储库中。

为什么

在公司内，如果项目较多，每一个项目都会有一个Git仓库，就会导致新来的员工每一次更改项目的时候都需要从 Git 仓库上面拉一份代码下来比较麻烦。

那如果将所有的项目放在一个仓库一起管理呢？这就是 monorepo。

优点

1. 对依赖统一进行管理。
2. 可以抽取逻辑维护公共库。
3. 所有项目统一配置相同的工程配置。

缺点

1. 需要有比较严格的 CR 规范。
2. Git 权限管理难以控制。
3. 版本控制比较麻烦

项目都需要规范的流程。

怎么做

目前来说，前端算是有两种比较常见的对 monorepo 的方案：

1. lerna.js
2. yarn workspace

当然，它们也可以同时使用。

yarn workspaces

它允许设置多个包，即只需运行一次 yarn 安装即可一次性安装所有包。

在package.json文件中添加以下内容

{
  "private": true,
  "workspaces": ["workspace-a", "workspace-b"]
}

禁止使用

在 .yarnrc 文件中添加：

workspaces-experimental false

learn.js

Github 仓库在：https://github.com/lerna/lerna

Lerna is a tool that optimizes the workflow around managing multi-package repositories with git and npm.

Lerna 是一个使用 git 和 npm 优化管理多包存储库的工作流程的工具。

需要注意的是：lerna 只是一个优化工作流程的工具，并不是一个部署工具。

安装

# 新建一个项目
mkdir lerna-demo && cd lerna-demo

# 初始化项目
npm init -y

# 安装 lerna
yarn add lerna -D

# 初始化 lerna 的项目
npx lerna init

此时一个最基本的 lerna 项目算是完成了。

(记得添加 .gitignore )

使用

上述的命令完成之后，现在项目的文件目录：

CleanShot 2021-06-26 at [email protected]

更改一下 package.json 在其中加一个字段：

{
  "private": true,
  // ...
}

由于我们管理的是子项目，一般不对父项目进行发布处理，所以将 private 设置为 true。

然后在 packages 目录中新建项目即可。

lerna 会自动检测到 packages 里面的项目进行管理。

packages 目录中的项目需要注意一件事情：

• package.json 的 name 字段需要和文件夹的名称相同。

命令

• lerna init: 初始化
• learn list: 列出现在管理的项目
• lerna diff: 列出最近一次 release 的区别
• lerna change: 更改了哪些 package
• lerna bootstrap: 安装依赖并且链接任何交叉依赖项
• lerna clean: 清理所有依赖项
• lerna exec: 在每个 package 执行命令
• lerna run: 在包含 npm script 中的每个 package 执行 npm script
• lerna import: 将 package 导入到具有提交历史记录的 monorepo 中
• lerna link: 将相互依赖的所有 package 符号链接在一起

同时使用

lerna 和 yarn workspace 可以同时使用

在 lerna.json 添加：

{
  "packages": [
    "packages/*"
  ],
  "version": "0.0.0",
  "npmClient": "yarn",
  "useWorkspaces": true
}

然后在 package.json 添加：

{
  // ...
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}

区别

在 yarn workspace 中有这么一段：

Yarn’s workspaces are the low-level primitives that tools like Lerna can (and do!) use. They will never try to support the high-level feature that Lerna offers, but by implementing the core logic of the resolution and linking steps inside Yarn itself we hope to enable new usages and improve performance.

这个就是区别

参考

wikipedia Monorepo: https://en.wikipedia.org/wiki/Monorepo

yarn workspace: https://classic.yarnpkg.com/en/docs/workspaces

lerna github: https://github.com/lerna/lerna