文章目錄
- 前言
- 1. 演示:檢測和修復幽靈依賴
- 步驟1:安裝 depcheck
- 步驟2:在項目根目錄運行 depcheck
- 可能的輸出
- 步驟3:修復幽靈依賴
- 2. 依賴管理的好習慣
- 1. 場景設定
- 現在有如下依賴需求:
- 2. 依賴沖突的表現
- 3. 解決依賴沖突的方法
- 方法一:統一依賴版本
- 方法二:強制安裝多版本(不推薦,除非特殊需求)
- 4. 實際操作演示
- 統一依賴版本
- 5. 檢查依賴沖突
- 總結
前言
實際項目中發現和修復幽靈依賴問題,并給出常見依賴管理的好習慣。
1. 演示:檢測和修復幽靈依賴
假設你的 package.json
如下(只聲明了 lodash
):
{"name": "root","private": true,"workspaces": ["packages/*"],"devDependencies": {"lerna": "^7.1.5"},"volta": {"node": "18.17.1"}
}
假設你在某個包的代碼里寫了如下內容:
const _ = require('lodash');
const moment = require('moment'); // 實際未聲明依賴
步驟1:安裝 depcheck
npm install -g depcheck
步驟2:在項目根目錄運行 depcheck
depcheck
可能的輸出
Missing dependencies
* moment
這說明你的代碼用到了 moment
,但 package.json
沒有聲明。
步驟3:修復幽靈依賴
執行:
npm install moment --save
這樣 moment
就會被正確聲明到 dependencies
里,幽靈依賴問題解決。
2. 依賴管理的好習慣
- 用到什么依賴就聲明什么依賴,不要依賴于“間接依賴”。
- 定期用
depcheck
或類似工具檢查項目依賴的準確性。 - 刪除未使用的依賴,保持
package.json
干凈。 - 對于 Monorepo 項目,每個包都要單獨管理自己的依賴。
下面通過一個實際例子,演示在 Monorepo(如你當前的 Lerna + Yarn/NPM Workspaces 項目)下,子包的依賴管理和依賴沖突的解決方法。
1. 場景設定
假設你的 Monorepo 結構如下:
packages/header/package.jsonfooter/package.jsonremixapp/package.json
現在有如下依賴需求:
header
依賴react@17.0.2
footer
依賴react@18.1.0
remixapp
依賴react@18.1.0
2. 依賴沖突的表現
如果你分別在 header
和 footer
的 package.json
里聲明不同版本的 react
,再在根目錄執行 yarn install
或 npm install
,包管理器會嘗試“扁平化”依賴,但如果版本沖突無法合并,會出現如下情況:
node_modules/react
只會有一個版本(比如 18.1.0),header
代碼如果用到了 17.x 的特性,可能會報錯或行為異常。
3. 解決依賴沖突的方法
方法一:統一依賴版本
最佳實踐是在 Monorepo 根目錄的 package.json
里統一聲明所有子包的公共依賴(如 react
),并保證版本一致:
{// ... 其他配置 ..."devDependencies": {"lerna": "^7.1.5","react": "18.1.0","react-dom": "18.1.0"}
}
然后在各子包的 package.json
里去掉對 react
的聲明,或者用 peerDependencies
指定兼容范圍:
{// ... 其他配置 ..."peerDependencies": {"react": ">=18.0.0","react-dom": ">=18.0.0"}
}
這樣,所有包都用同一份 react
,避免沖突。
方法二:強制安裝多版本(不推薦,除非特殊需求)
如果確實有包必須依賴不同版本,可以在子包的 node_modules
里安裝特定版本(但會導致包體積變大,依賴樹復雜,維護困難)。
4. 實際操作演示
統一依賴版本
- 在根目錄添加依賴:
npm install react@18.1.0 react-dom@18.1.0 --save-dev
- 在子包
footer/package.json
里改為 peerDependencies:
// ... 省略 ..."peerDependencies": {"react": ">=18.0.0","react-dom": ">=18.0.0"},
// ... 省略 ...
- 刪除子包 dependencies 里的 react/ react-dom,保存后重新安裝依賴:
npm install
5. 檢查依賴沖突
可以用如下命令檢查依賴樹:
npm ls react
如果所有包都指向同一個版本,說明依賴沖突已解決。
總結
- Monorepo 下建議在根目錄統一管理公共依賴,子包用 peerDependencies 聲明兼容范圍。
- 避免各子包聲明不同版本的同一依賴,否則會出現沖突和幽靈依賴等問題。
- 定期用
npm ls
或yarn why
檢查依賴樹,確保依賴一致性。