日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
現(xiàn)代Monorepo工程技術(shù)選型，聊聊我的思考

前言

相信很多關(guān)注 Monorepo 生態(tài)的同學(xué)，應(yīng)該大都看過這篇文章 monorepo.tools [1] ，其中列舉了現(xiàn)存的幾個主流的 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)地，在這篇文章中也對各類工具進行了一一介紹。并且，我相信每個看過這篇文章的同學(xué)，都會留下這么個疑問： 這么多 Monorepo Tool，我要如何進行選型？

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

PNPM

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

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

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

hoist-pattern[]=*lodash*

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

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

Workspace 配置

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

packages:
 - 'packages/**'

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

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

pnpm i

在 PNPM 中，安裝依賴可以用 pnpm i 來完成。在 Monorepo 的場景下，默認情況下 pnpm i 會安裝所有的依賴（包括 packages/* ）。此外， pnpm i 還需要用到 3 個選項（Option）：

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

pnpm remove

在 PNPM 中，刪除在 package.json 中的某個依賴，可以用 pnpm remove 完成。它的選項（Option）使用和 pnpm i 大同小異。其中，不同地是當(dāng)我們在工作區(qū)想要刪除 packages 中所有包的 package.json 中的某個依賴的時候，需要使用 -r ，例如移除所有包中的 lodash ：

pnpm remove lodash -r

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

Changesets

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

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

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

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

pnpm i -DW @changesets/cli
pnpm changeset init

前者是安裝 Changesets 的 CLI，后者是初始化 .changeset 文件夾以及對應(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 這個不需要修改的字段， config.json 文件中列了 7 個字段，各個字段分別代表的作用為：

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

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

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

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

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

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

所以，你可以理解成 快 是選擇 Turborepo 負責(zé) Monorepo 項目多包任務(wù)執(zhí)行的原因。而在 Turborepo 中執(zhí)行多包任務(wù)是通過 turbo run <tt id="ct4zx"></tt>

  • <tt id="ct4zx"></tt><tt id="ct4zx"></tt>
    1.