在我最近的工作項(xiàng)目中，我采用了 pnpm monorepo 來(lái)管理多個(gè)基礎(chǔ)庫(kù)的開(kāi)發(fā)。這種方式雖然在項(xiàng)目組織上提供了便利，但在調(diào)試過(guò)程中卻給我?guī)?lái)了不小的挑戰(zhàn)。

當(dāng)項(xiàng)目中的庫(kù)出現(xiàn) bug 時(shí)，定位問(wèn)題的源頭變得異常困難。我最初的想法是，由于 pnpm monorepo 環(huán)境下庫(kù)之間存在 monorepo 其他庫(kù)的依賴，傳統(tǒng)的調(diào)試方法似乎難以應(yīng)對(duì)。特別是處理 workspace:* 這樣的依賴聲明時(shí)，我感到無(wú)從下手。

起初，我沒(méi)有深入研究，而是選擇了最直接的方法來(lái)應(yīng)對(duì)問(wèn)題：

• 直接在項(xiàng)目中定位可能的錯(cuò)誤點(diǎn)，并嘗試復(fù)現(xiàn)問(wèn)題場(chǎng)景。
• 在基礎(chǔ)庫(kù)中對(duì)發(fā)現(xiàn)的 bug 進(jìn)行修復(fù)。
• 修復(fù)后發(fā)布新版本，并在項(xiàng)目中驗(yàn)證修復(fù)效果。

這個(gè)過(guò)程不僅繁瑣耗時(shí)，而且往往不能保證問(wèn)題得到徹底解決。

調(diào)試

在 pnpm 的官網(wǎng)上看到了 pnpm link，了解了一下發(fā)現(xiàn)，原來(lái)也是可以實(shí)現(xiàn)聯(lián)調(diào)的。

使用

pnpm link

pnpm link 和 npm link 的使用是一樣的，用于鏈接指定的文件夾。

# 找到需要聯(lián)調(diào)的庫(kù)，安裝依賴
cd ~/packages/core
pnpm install
# 來(lái)到項(xiàng)目中，鏈接這個(gè)庫(kù)即可
cd ~/projects/my-project
pnpm link ~/packages/core

pnpm link —global

而 pnpm link --global 的話，是將庫(kù)鏈接到全局的 node_modules。

然后再另一個(gè)需要使用的庫(kù)或者項(xiàng)目中通過(guò) pnpm link --global <pkg> 引用即可。

# 找到需要聯(lián)調(diào)的庫(kù)，安裝依賴，然后進(jìn)行 link
cd ~/packages/core
pnpm install
pnpm link --global
# 來(lái)到項(xiàng)目中，鏈接這個(gè)庫(kù)即可
cd ~/projects/my-project
pnpm link --global core

unlink

完成調(diào)試后，可以使用 unlink 命令來(lái)取消鏈接，用法和 pnpm link 相同。

pnpm unlink <dir>
pnpm unlink --global
pnpm unlink --global <pkg>

說(shuō)明

對(duì)于庫(kù)中存在引用其他庫(kù)的情況下（workspace:* ）：

pnpm link 會(huì)發(fā)出警告，但 pnpm 會(huì)自動(dòng)處理這些依賴，確保所有鏈接的庫(kù)都能正確解析其依賴項(xiàng)。

我們可以看一下。

在你 pnpm link --global 的時(shí)候，pnpm 會(huì)進(jìn)行警告。

而在項(xiàng)目中鏈接庫(kù)后，在 node_modules 可以看出來(lái)，pnpm 幫我們已經(jīng)處理好了。

pnpm 會(huì)對(duì)特殊的引用庫(kù)（workspace:* ）創(chuàng)造軟鏈，鏈接到 pnpm monorepo 中的對(duì)應(yīng)庫(kù)中。

所以，本質(zhì)上說(shuō)，其實(shí)和 link 單個(gè)庫(kù)是一樣的，只是 pnpm 幫我們做了些額外的依賴處理。

多庫(kù)聯(lián)調(diào)

當(dāng)然，你甚至也可以直接同時(shí) link 多個(gè)庫(kù)進(jìn)行調(diào)試。這樣可以實(shí)現(xiàn)多個(gè)依賴的庫(kù)之間一起進(jìn)行聯(lián)調(diào)了。

以上圖為例，現(xiàn)在要聯(lián)調(diào) core 和 designer 兩個(gè)庫(kù)，其中 designer 依賴了 core，兩個(gè)庫(kù)先分別 link。

# 分別在兩個(gè)庫(kù)中執(zhí)行
pnpm i
pnpm link --global
# 在項(xiàng)目中執(zhí)行
pnpm link --global core
pnpm link --global designer

其實(shí)很簡(jiǎn)單，通過(guò)這種方式，core 和 designer 都被鏈接到了全局的 node_modules 中。

原理

現(xiàn)在 core 和 designer 都鏈接在了全局的 node_modules 中，而項(xiàng)目中其實(shí)也是軟鏈到了全局 node_modules 中。

我們?cè)倩氐?desinger 庫(kù)，它依賴了 core，pnpm 會(huì)幫我們軟鏈到的 core，而此時(shí)項(xiàng)目的 core 是軟鏈到全局的 node_modules。

盡管兩者 core 最終都是鏈接到基礎(chǔ)庫(kù)中，但鏈接的路徑是不一樣的。

• 鏈接庫(kù)存在特殊的引用庫(kù)（workspace:* ）時(shí)，pnpm 會(huì)幫我們直接軟鏈到其庫(kù)里。
• 而 link 的方式，是軟鏈到全局 node_modules 中，再軟鏈到基礎(chǔ)庫(kù)中。

參考鏈接

pnpm link | pnpm

到此這篇關(guān)于pnpm monorepo 聯(lián)調(diào)方案的文章就介紹到這了,更多相關(guān)pnpm monorepo 聯(lián)調(diào)方案內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論