現(xiàn)代 Monorepo 工程技術(shù)選型，聊聊我的思考

作者：五柳 2022-09-22 09:54:56

看了本文我想大家應(yīng)該理解了 PNPM + Turborepo + Changesets 這個(gè)技術(shù)選型的原因以及要怎么做。

前言

相信很多關(guān)注 Monorepo 生態(tài)的同學(xué)，應(yīng)該大都看過這篇文章 monorepo.tools [1] ，其中列舉了現(xiàn)存的幾個(gè)主流的 Monorepo 相關(guān)的工具：

Bazel (by Google) [2]
Lage (by Microsoft) [3]
Lerna [4]
Nx (by Nrwl) [5]
Rush (by Microsoft) [6]
Turborepo (by Vercel) [7]

相應(yīng)地，在這篇文章中也對(duì)各類工具進(jìn)行了一一介紹。并且，我相信每個(gè)看過這篇文章的同學(xué)，都會(huì)留下這么個(gè)疑問：這么多 Monorepo Tool，我要如何進(jìn)行選型？

這里，我給出的答案是 PNPM + Turborepo + Changesets。那么，又為什么是這 3 者呢？下面，我將會(huì)分別圍繞這 3 個(gè)技術(shù)展開，來一一解答這個(gè)選型的原因以及怎么做。

PNPM

PNPM 的動(dòng)機(jī)（ Motivation [8] ），如它在官方文檔介紹的所說： “Saving disk space and boosting installation speed”，節(jié)省磁盤空間和提高安裝速度。除開這個(gè)動(dòng)機(jī)描述的顯著優(yōu)點(diǎn)外， PNPM 內(nèi)置了對(duì) Monorepo 的支持 [9] ，并解決了很多令人詬病的問題。

其中，比較經(jīng)典的就是 Phantom dependencies（幻影依賴）。由于，默認(rèn)情況下 yarn 、 npm 安裝的依賴都是會(huì)被提升。所以，有時(shí)候你可能會(huì)遇到 Monorepo 項(xiàng)目中的某個(gè)包中的 package.json 沒有安裝這個(gè)依賴，結(jié)果實(shí)際代碼中卻使用了這個(gè)依賴...

雖說，PNPM 可以解決這個(gè)問題，但是，默認(rèn)情況下 PNPM 安裝的依賴也是會(huì)被提升的。如果，需要 PNPM 禁止依賴提升，我們可以通過在 Monorepo 項(xiàng)目工作區(qū)下的 .npmrc 文件中配置 [10] ，例如只提升 lodash ：

hoist-pattern[]=*lodash*

當(dāng)然，還有一些其他的問題，有興趣的同學(xué)可以看 ELab 團(tuán)隊(duì)寫的這篇文章《Monorepo 的這些坑，我們幫你踩過了！》 [11] 。

那么，在簡(jiǎn)單解答了為什么用 PNPM 后，下面我們來看一下要怎么用？

Workspace 配置

要使用 PNPM 的 Monorepo 很簡(jiǎn)單，只需要在 Monorepo 項(xiàng)目的工作區(qū)下新建 pnpm-workspace.yaml 文件并配置：

packages:
 - 'packages/**'

接下來，則是記憶常用依賴和多包任務(wù)執(zhí)行相關(guān)的命令。由于，我們的技術(shù)選型中有 Turborepo，它會(huì)負(fù)責(zé)多包任務(wù)的執(zhí)行。所以，這里只需要記憶常用依賴相關(guān)的命令。

常用依賴相關(guān)命令

pnpm i

在 PNPM 中，安裝依賴可以用 pnpm i 來完成。在 Monorepo 的場(chǎng)景下，默認(rèn)情況下 pnpm i 會(huì)安裝所有的依賴（包括 packages/* ）。此外， pnpm i 還需要用到 3 個(gè)選項(xiàng)（Option）：

--filter <package>，安裝依賴到指定的 package，不聲明要安裝的依賴包則默認(rèn)安裝 package.json 中的所有依賴
--prod, P，安裝依賴到 dependencies
--dev, D，安裝依賴到 devDependencies

pnpm remove

在 PNPM 中，刪除在 package.json 中的某個(gè)依賴，可以用 pnpm remove 完成。它的選項(xiàng)（Option）使用和 pnpm i 大同小異。其中，不同地是當(dāng)我們?cè)诠ぷ鲄^(qū)想要?jiǎng)h除 packages 中所有包的 package.json 中的某個(gè)依賴的時(shí)候，需要使用 -r ，例如移除所有包中的 lodash ：

pnpm remove lodash -r

當(dāng)然，可能還有同學(xué)有一些其他的訴求，有興趣的同學(xué)可以移步文檔了解，這里不做展開。

Changesets

經(jīng)常維護(hù)開源項(xiàng)目的同學(xué)都知道的一點(diǎn)，每次包（Package）的發(fā)布，需要修改 package.json 的 version 字段，以及同步更新一下本次發(fā)布修改的 CHANGELOG.md。

這么一來，就會(huì)凸顯一個(gè)問題，每次發(fā)布都需要手動(dòng)地去更新 version 、更新 CHANGELOG.md，未免有點(diǎn)繁瑣。并且，用過 Lerna 的同學(xué)，應(yīng)該都知道 Lerna 內(nèi)置了對(duì)這塊的支持。

但是，無論是 PNPM 又或者是下面要說的 Turborepo 都不支持這塊，所以 2 者的官方文檔都給大家推薦了用于支持這塊能力的工具，例如 Changesets [12] 、 Beachball [13] 、 Auto [14] 等。

那么，這里我們要介紹的就是 Changesets。下面，我們來看一下在前面建好的 PNPM 的 Monorepo 項(xiàng)目中如何使用 Changesets。首先，需要執(zhí)行在 Monorepo 項(xiàng)目的工作區(qū)下，執(zhí)行如下 2 個(gè)命令：

pnpm i -DW @changesets/cli
pnpm changeset init

前者是安裝 Changesets 的 CLI，后者是初始化 .changeset 文件夾以及對(duì)應(yīng)的文件：

.changeset
 ｜-- config.json
 ｜__ README.md

這里，我們來看一下 config.json [15] 文件：

{
 "$schema": "https://unpkg.com/@changesets/config@1.6.4/schema.json",
 "changelog": "@changesets/cli/changelog",
 "commit": false,
 "linked": [],
 "access": "restricted",
 "baseBranch": "master",
 "updateInternalDependencies": "patch",
 "ignore": []
}

除開 $schema 這個(gè)不需要修改的字段， config.json 文件中列了 7 個(gè)字段，各個(gè)字段分別代表的作用為：

changelog 設(shè)置 CHANGELOG.md 生成方式，可以設(shè)置 false 不生成，也可以設(shè)置為定義生成行為的文件地址或依賴名稱，例如 Changsets 提供的 `changelog-git` [16] 。其中，定義生成行為的文件固定代碼模版為：

async function getReleaseLine() {}
async function getDependencyReleaseLine() {}
export default {
 getReleaseLine,
 getDependencyReleaseLine
}

commit 設(shè)置是否把執(zhí)行 changeset add 或 changeset publish 操作時(shí)對(duì)修改用 Git 提交
linked 設(shè)置共享版本的包，而不是獨(dú)立版本的包，例如一個(gè)組件庫(kù)中主題和單獨(dú)的組件的關(guān)系，也就是修改 Version 的時(shí)候，共享的包需要同步一起更新版本
access 設(shè)置執(zhí)行 npm publish 的 --access 選項(xiàng)，通常情況下我們是公共的包，所以設(shè)置 public 即可（注意，它會(huì)被 package.json 中的 access 字段重寫）
baseBranch 設(shè)置默認(rèn)的 Git 分支，例如現(xiàn)在 GitHub 的默認(rèn)分支應(yīng)該是 main
updateInternalDependencies 設(shè)置互相依賴的包版本更新機(jī)制，它是一個(gè)枚舉（ major|minor|patch ），例如設(shè)置為 minor 時(shí)，只有當(dāng)依賴的包新了 minor 版本或者才會(huì)對(duì)應(yīng)地更新 package.json 的 dependencies 或 devDependencies 中對(duì)應(yīng)依賴的版本
ignore 設(shè)置不需要發(fā)布的包，這些會(huì)被 Changesets 忽略

在初始化 .changeset 文件夾后，就可以正常使用 changeset 相關(guān)的命令，主要是這 3 個(gè)命令：

pnpm chageset 用于生成本次修改的要添加到 CHANGELOG.md 中的描述
pnpm changeset version 用于生成本次修改后的包的版本
pnpm changeset publish 用于發(fā)布包

此外，如果是在業(yè)務(wù)場(chǎng)景下，我們通常需要把包發(fā)到公司私有的 NPM Registry ，而這有很多種配置方式。但是，需要注意的是 Changesets 只支持在每個(gè)包中聲明 publicConfig.registry 或者配置 process.env.npm_config_registry ，對(duì)應(yīng)的代碼會(huì)是這樣：

// https://github.com/changesets/changesets/blob/main/packages/cli/src/commands/publish/npm-utils.ts
function getCorrectRegistry(packageJson?: PackageJSON): string {
 const registry =
   packageJson?.publishConfig?.registry ?? process.env.npm_config_registry;
 return !registry || registry === "https://registry.yarnpkg.com"
   ? "https://registry.npmjs.org"
   : registry;
}

可以看到，如果在前面說的這 2 種情況下獲取不到 registry 的話，Changesets 都是按公共的 Registry 去查找或者發(fā)布包的。

Turborepo

說起 Turborepo，可能大家會(huì)有點(diǎn)陌生。但是，對(duì)于 Vercel [17] 我想大家都知道（畢竟 Rich Harris [18] 、Sebastian Markb?ge 等都加入了），Turbrepo 則是 Vercel 旗下的一個(gè)開源項(xiàng)目。Turborepo 是用于為 JavaScript/TypeScript 的 Monorepo 提供一個(gè)極快的構(gòu)建系統(tǒng)，簡(jiǎn)單地理解就是用 Turborepo 來執(zhí)行 Monorepo 項(xiàng)目的中構(gòu)建（或者其他）任務(wù)會(huì) 非常快！

關(guān)于 Turborepo 其他優(yōu)勢(shì)，其官方文檔 [19] 寫的很詳盡，有興趣的同學(xué)可以自行了解~

所以，你可以理解成快是選擇 Turborepo 負(fù)責(zé) Monorepo 項(xiàng)目多包任務(wù)執(zhí)行的原因。而在 Turborepo 中執(zhí)行多包任務(wù)是通過 turbo run <script> 。不過， turbo run 和 lerna run 直接使用有所不同，它需要配置 turbo.json 文件，注冊(cè)每個(gè)需要執(zhí)行的 script 命令。

在 Turborepo 中有個(gè) Pipelines [20] 的概念，它是由 turbo.json 文件中的 pipline 字段的配置描述，它會(huì)在執(zhí)行 turbo run 命令的時(shí)候，根據(jù)對(duì)應(yīng)的配置進(jìn)行有序的執(zhí)行和緩存輸出的文件。

舉個(gè)例子，通常情況下我們一個(gè) Monorepo 項(xiàng)目中的每個(gè)包可能會(huì)有 dev 、 build 、 test 、 clean 等 4 個(gè)命令，那么對(duì)應(yīng)的 turbo.json 的配置會(huì)是這樣：

{
 "pipeline": {
   "build": {
     "dependsOn": ["^build"],
     "outputs": ["dist/**"]
   },
   "clean": {
     "dependsOn": ["^clean"]
   },
   "test": {
     "dependsOn": ["build"， "lint"]
   },
   "dev": {
     "cache": false
   }
 }
}

可以看到， pipeline 中的每個(gè) key 則對(duì)應(yīng)著每個(gè)需要執(zhí)行的 turbo run 命令的名稱，其中 dependsOn 、 outputs 、 cache 等 3 個(gè)字段分別作用為：

dependsOn 表示當(dāng)前命令所依賴的命令，^ 表示 dependencies 和 devDependencies 的所有依賴都執(zhí)行完 build，才執(zhí)行 build
outputs 表示命令執(zhí)行輸出的文件緩存目錄，例如我們常見的 dist、coverage 等
cache 表示是否緩存，通常我們執(zhí)行 dev 命令的時(shí)候會(huì)結(jié)合 watch 模式，所以這種情況下關(guān)閉掉緩存比較切合實(shí)際需求

這樣一來，我們就可以使用諸如 turbo run build test 的命令，它則會(huì)按 pipeline 的配置依次執(zhí)行對(duì)應(yīng)的命令。

當(dāng)然，如果你想每個(gè)命令都支持單獨(dú)執(zhí)行，可以直接配置為 {} 即可。此外，如果要使用 turbo run 命令，還需要在 package.json 中聲明 packageManage 字段為指定的包管理工具及版本，例如 "packageManager": "pnpm@6.30.0" 。

結(jié)語(yǔ)

閱讀到此處，我想大家應(yīng)該理解了 PNPM + Turborepo + Changesets 這個(gè)技術(shù)選型的原因以及要怎么做。當(dāng)然，這個(gè)選型只是我個(gè)人的思考所得出的答案，相信也有同學(xué)仍然鐘情于 Lerna，又或者喜歡 Rush 一把梭，這些觀點(diǎn)并無對(duì)錯(cuò)，本質(zhì)上這也是編程的魅力所在，各個(gè)輪子都有其存在的價(jià)值。

責(zé)任編輯：張燕妮來源： Code center