pnpm?monorepo?聯(lián)調方案問題解析
在我最近的工作項目中,我采用了 pnpm monorepo 來管理多個基礎庫的開發(fā)。這種方式雖然在項目組織上提供了便利,但在調試過程中卻給我?guī)砹瞬恍〉奶魬?zhàn)。
當項目中的庫出現(xiàn) bug 時,定位問題的源頭變得異常困難。我最初的想法是,由于 pnpm monorepo 環(huán)境下庫之間存在 monorepo 其他庫的依賴,傳統(tǒng)的調試方法似乎難以應對。特別是處理 workspace:* 這樣的依賴聲明時,我感到無從下手。
起初,我沒有深入研究,而是選擇了最直接的方法來應對問題:
- 直接在項目中定位可能的錯誤點,并嘗試復現(xiàn)問題場景。
- 在基礎庫中對發(fā)現(xiàn)的 bug 進行修復。
- 修復后發(fā)布新版本,并在項目中驗證修復效果。
這個過程不僅繁瑣耗時,而且往往不能保證問題得到徹底解決。
調試
在 pnpm 的官網上看到了 pnpm link,了解了一下發(fā)現(xiàn),原來也是可以實現(xiàn)聯(lián)調的。
使用
pnpm link
pnpm link 和 npm link 的使用是一樣的,用于鏈接指定的文件夾。
# 找到需要聯(lián)調的庫,安裝依賴 cd ~/packages/core pnpm install # 來到項目中,鏈接這個庫即可 cd ~/projects/my-project pnpm link ~/packages/core
pnpm link —global
而 pnpm link --global 的話,是將庫鏈接到全局的 node_modules。
然后再另一個需要使用的庫或者項目中通過 pnpm link --global <pkg> 引用即可。
# 找到需要聯(lián)調的庫,安裝依賴,然后進行 link cd ~/packages/core pnpm install pnpm link --global # 來到項目中,鏈接這個庫即可 cd ~/projects/my-project pnpm link --global core
unlink
完成調試后,可以使用 unlink 命令來取消鏈接,用法和 pnpm link 相同。
pnpm unlink <dir> pnpm unlink --global pnpm unlink --global <pkg>
說明
對于庫中存在引用其他庫的情況下(workspace:* ):
pnpm link 會發(fā)出警告,但 pnpm 會自動處理這些依賴,確保所有鏈接的庫都能正確解析其依賴項。
我們可以看一下。
在你 pnpm link --global 的時候,pnpm 會進行警告。

而在項目中鏈接庫后,在 node_modules 可以看出來,pnpm 幫我們已經處理好了。
pnpm 會對特殊的引用庫(workspace:* )創(chuàng)造軟鏈,鏈接到 pnpm monorepo 中的對應庫中。

所以,本質上說,其實和 link 單個庫是一樣的,只是 pnpm 幫我們做了些額外的依賴處理。
多庫聯(lián)調
當然,你甚至也可以直接同時 link 多個庫進行調試。這樣可以實現(xiàn)多個依賴的庫之間一起進行聯(lián)調了。
以上圖為例,現(xiàn)在要聯(lián)調 core 和 designer 兩個庫,其中 designer 依賴了 core,兩個庫先分別 link。
# 分別在兩個庫中執(zhí)行 pnpm i pnpm link --global # 在項目中執(zhí)行 pnpm link --global core pnpm link --global designer
其實很簡單,通過這種方式,core 和 designer 都被鏈接到了全局的 node_modules 中。
原理
現(xiàn)在 core 和 designer 都鏈接在了全局的 node_modules 中,而項目中其實也是軟鏈到了全局 node_modules 中。
我們再回到 desinger 庫,它依賴了 core,pnpm 會幫我們軟鏈到的 core,而此時項目的 core 是軟鏈到全局的 node_modules。
盡管兩者 core 最終都是鏈接到基礎庫中,但鏈接的路徑是不一樣的。
- 鏈接庫存在特殊的引用庫(
workspace:*)時,pnpm 會幫我們直接軟鏈到其庫里。 - 而
link的方式,是軟鏈到全局node_modules中,再軟鏈到基礎庫中。
參考鏈接
到此這篇關于pnpm monorepo 聯(lián)調方案的文章就介紹到這了,更多相關pnpm monorepo 聯(lián)調方案內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
JavaScript實現(xiàn)查找字符串中第一個不重復的字符
這篇文章主要介紹了JavaScript實現(xiàn)查找字符串中第一個不重復的字符,需要的朋友可以參考下2014-12-12
Add a Table to a Word Document
Add a Table to a Word Document...2007-06-06
JavaScript判斷瀏覽器對CSS3屬性是否支持的多種方法
其實在使用css3的一些屬性時,為了兼顧低端瀏覽器對CSS3的不友好性,往往需要知道某些瀏覽器是否支持要使用的CSS3屬性,以此來做向下適配。比如常見的CSS3動畫就很有必要檢測瀏覽器是否支持。下面本文就分享了幾種方法,有需要的朋友們可以參考借鑒。2016-11-11
區(qū)分JS中的undefined,null,"",0和false
區(qū)分JS中的undefined,null,"",0和false...2007-03-03
基于Web?Components實現(xiàn)一個日歷原生組件
這篇文章主要為大家詳細介紹了如何利用Web?Components實現(xiàn)一個簡單的日歷原生組件,文中的示例代碼講解詳細,需要的小伙伴可以了解一下2023-07-07
JavaScript實現(xiàn)圖片懶加載的三種方案詳解
圖片懶加載,當圖片出現(xiàn)在可視區(qū)域再進行加載,提升用戶的體驗,這篇文章主要為大家整理了三個常用的圖片懶加載實現(xiàn)方法,希望對大家有所幫助2023-12-12
JavaScript利用事件循環(huán)實現(xiàn)數(shù)據(jù)預加載
當我們請求好第一頁數(shù)據(jù)后,將請求下一頁放到異步任務隊列里(宏任務或者微任務),等當前同步任務執(zhí)行完成后,立馬請求下一頁數(shù)據(jù),本文給大家介紹了JavaScript如何利用事件循環(huán)實現(xiàn)數(shù)據(jù)預加載,需要的朋友可以參考下2024-05-05
JS判斷傳入函數(shù)的參數(shù)是否為空(函數(shù)參數(shù)是否傳遞)
這篇文章主要介紹了JS判斷傳入函數(shù)的參數(shù)是否為空(函數(shù)參數(shù)是否傳遞),需要的朋友可以參考下2023-05-05

