pnpm?monorepo?聯(lián)調(diào)方案問題解析
在我最近的工作項(xiàng)目中,我采用了 pnpm monorepo
來管理多個基礎(chǔ)庫的開發(fā)。這種方式雖然在項(xiàng)目組織上提供了便利,但在調(diào)試過程中卻給我?guī)砹瞬恍〉奶魬?zhàn)。
當(dāng)項(xiàng)目中的庫出現(xiàn) bug 時,定位問題的源頭變得異常困難。我最初的想法是,由于 pnpm monorepo
環(huán)境下庫之間存在 monorepo 其他庫的依賴,傳統(tǒng)的調(diào)試方法似乎難以應(yīng)對。特別是處理 workspace:*
這樣的依賴聲明時,我感到無從下手。
起初,我沒有深入研究,而是選擇了最直接的方法來應(yīng)對問題:
- 直接在項(xiàng)目中定位可能的錯誤點(diǎn),并嘗試復(fù)現(xiàn)問題場景。
- 在基礎(chǔ)庫中對發(fā)現(xiàn)的 bug 進(jìn)行修復(fù)。
- 修復(fù)后發(fā)布新版本,并在項(xiàng)目中驗(yàn)證修復(fù)效果。
這個過程不僅繁瑣耗時,而且往往不能保證問題得到徹底解決。
調(diào)試
在 pnpm 的官網(wǎng)上看到了 pnpm link
,了解了一下發(fā)現(xiàn),原來也是可以實(shí)現(xiàn)聯(lián)調(diào)的。
使用
pnpm link
pnpm link
和 npm link
的使用是一樣的,用于鏈接指定的文件夾。
# 找到需要聯(lián)調(diào)的庫,安裝依賴 cd ~/packages/core pnpm install # 來到項(xiàng)目中,鏈接這個庫即可 cd ~/projects/my-project pnpm link ~/packages/core
pnpm link —global
而 pnpm link --global
的話,是將庫鏈接到全局的 node_modules
。
然后再另一個需要使用的庫或者項(xiàng)目中通過 pnpm link --global <pkg>
引用即可。
# 找到需要聯(lián)調(diào)的庫,安裝依賴,然后進(jìn)行 link cd ~/packages/core pnpm install pnpm link --global # 來到項(xiàng)目中,鏈接這個庫即可 cd ~/projects/my-project pnpm link --global core
unlink
完成調(diào)試后,可以使用 unlink
命令來取消鏈接,用法和 pnpm link
相同。
pnpm unlink <dir> pnpm unlink --global pnpm unlink --global <pkg>
說明
對于庫中存在引用其他庫的情況下(workspace:*
):
pnpm link
會發(fā)出警告,但 pnpm 會自動處理這些依賴,確保所有鏈接的庫都能正確解析其依賴項(xiàng)。
我們可以看一下。
在你 pnpm link --global
的時候,pnpm 會進(jìn)行警告。
而在項(xiàng)目中鏈接庫后,在 node_modules
可以看出來,pnpm 幫我們已經(jīng)處理好了。
pnpm 會對特殊的引用庫(workspace:*
)創(chuàng)造軟鏈,鏈接到 pnpm monorepo
中的對應(yīng)庫中。
所以,本質(zhì)上說,其實(shí)和 link
單個庫是一樣的,只是 pnpm 幫我們做了些額外的依賴處理。
多庫聯(lián)調(diào)
當(dāng)然,你甚至也可以直接同時 link
多個庫進(jìn)行調(diào)試。這樣可以實(shí)現(xiàn)多個依賴的庫之間一起進(jìn)行聯(lián)調(diào)了。
以上圖為例,現(xiàn)在要聯(lián)調(diào) core
和 designer
兩個庫,其中 designer 依賴了 core,兩個庫先分別 link
。
# 分別在兩個庫中執(zhí)行 pnpm i pnpm link --global # 在項(xiàng)目中執(zhí)行 pnpm link --global core pnpm link --global designer
其實(shí)很簡單,通過這種方式,core
和 designer
都被鏈接到了全局的 node_modules
中。
原理
現(xiàn)在 core
和 designer
都鏈接在了全局的 node_modules
中,而項(xiàng)目中其實(shí)也是軟鏈到了全局 node_modules
中。
我們再回到 desinger
庫,它依賴了 core
,pnpm
會幫我們軟鏈到的 core
,而此時項(xiàng)目的 core
是軟鏈到全局的 node_modules
。
盡管兩者 core 最終都是鏈接到基礎(chǔ)庫中,但鏈接的路徑是不一樣的。
- 鏈接庫存在特殊的引用庫(
workspace:*
)時,pnpm 會幫我們直接軟鏈到其庫里。 - 而
link
的方式,是軟鏈到全局node_modules
中,再軟鏈到基礎(chǔ)庫中。
參考鏈接
到此這篇關(guān)于pnpm monorepo 聯(lián)調(diào)方案的文章就介紹到這了,更多相關(guān)pnpm monorepo 聯(lián)調(diào)方案內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript實(shí)現(xiàn)查找字符串中第一個不重復(fù)的字符
這篇文章主要介紹了JavaScript實(shí)現(xiàn)查找字符串中第一個不重復(fù)的字符,需要的朋友可以參考下2014-12-12Add a Table to a Word Document
Add a Table to a Word Document...2007-06-06JavaScript判斷瀏覽器對CSS3屬性是否支持的多種方法
其實(shí)在使用css3的一些屬性時,為了兼顧低端瀏覽器對CSS3的不友好性,往往需要知道某些瀏覽器是否支持要使用的CSS3屬性,以此來做向下適配。比如常見的CSS3動畫就很有必要檢測瀏覽器是否支持。下面本文就分享了幾種方法,有需要的朋友們可以參考借鑒。2016-11-11區(qū)分JS中的undefined,null,"",0和false
區(qū)分JS中的undefined,null,"",0和false...2007-03-03基于Web?Components實(shí)現(xiàn)一個日歷原生組件
這篇文章主要為大家詳細(xì)介紹了如何利用Web?Components實(shí)現(xiàn)一個簡單的日歷原生組件,文中的示例代碼講解詳細(xì),需要的小伙伴可以了解一下2023-07-07JavaScript實(shí)現(xiàn)圖片懶加載的三種方案詳解
圖片懶加載,當(dāng)圖片出現(xiàn)在可視區(qū)域再進(jìn)行加載,提升用戶的體驗(yàn),這篇文章主要為大家整理了三個常用的圖片懶加載實(shí)現(xiàn)方法,希望對大家有所幫助2023-12-12JavaScript利用事件循環(huán)實(shí)現(xiàn)數(shù)據(jù)預(yù)加載
當(dāng)我們請求好第一頁數(shù)據(jù)后,將請求下一頁放到異步任務(wù)隊列里(宏任務(wù)或者微任務(wù)),等當(dāng)前同步任務(wù)執(zhí)行完成后,立馬請求下一頁數(shù)據(jù),本文給大家介紹了JavaScript如何利用事件循環(huán)實(shí)現(xiàn)數(shù)據(jù)預(yù)加載,需要的朋友可以參考下2024-05-05JS判斷傳入函數(shù)的參數(shù)是否為空(函數(shù)參數(shù)是否傳遞)
這篇文章主要介紹了JS判斷傳入函數(shù)的參數(shù)是否為空(函數(shù)參數(shù)是否傳遞),需要的朋友可以參考下2023-05-05