一、問題背景

npm install安裝項目依賴時報錯

PS D:\test> npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: vue-admin-template@4.2.1
npm ERR! Found: webpack@5.74.0
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"^5.11.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^3.1.0" from extract-text-webpack-plugin@3.0.2
npm ERR! node_modules/extract-text-webpack-plugin
npm ERR!   extract-text-webpack-plugin@"^3.0.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See D:\Program\nodejs\node_cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\Program\nodejs\node_cache\_logs\2022-08-23T01_38_42_815Z-debug.log
PS D:\test> npm install --legacy-peer-deps

解決：npm install --legacy-peer-deps

其實提示上有：npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps

二、什么是peerDependency？

　　在日常使用命令npm install / npm install XX下載依賴的操作中，如果你使用的是 npm v7 以上的版本，那么應該經常會遇到無法解析依賴樹的問題（依賴沖突），就如我在上面遇到的那樣報錯

　　但是每當遇到這種情況的時候，我用命令npm install --legacy-peer-deps就可以順利進行下載操作。

1、這是為什么呢？帶著好奇心，我去研究學習了一番npm install xxxx --legacy-peer-deps命令是什么？為什么可以解決下載時候產生的依賴沖突呢？

　　我們日常在前端項目開發(fā)過程中，見到最多的一定是package.json文件里的devDependencies（用于在開發(fā)環(huán)境下依賴的模塊）和dependencies（無論開發(fā)環(huán)境還是生產環(huán)境都需要的依賴模塊）這兩個字段

　　那么命令--legacy-peer-dep里的peerDependency是什么依賴呢？根據geeksforgeeks網站里的定義：

Peer Dependencies: In package.json file, there is an object called as peerDependencies and it consists of all the packages that are exactly required in the project or to the person who is downloading and the version numbers should also be the same. That is the reason they were named as peerDependencies. The best example is ‘react’ which is common in every project to run similarly.

　　翻譯一下就是說，在package.json文件中，存在一個叫做peerDependencies（對等依賴關系）的對象，它包含了項目里需要的所有的包或者用戶正在下載的版本號相同的所有的包（很繞，但意思就是對等依賴關系指定我們的包與某個特定版本的npm包兼容）；對等依賴關系最好的例子就是React，一個聲明式的創(chuàng)建用戶界面的JS庫。

2、那么我們?yōu)槭裁葱枰獙Φ纫蕾囮P系呢？

　　假設我們現在有一個Hello工程，已經在其根目錄下的package.json文件中的dependencies字段里聲明了packageA作為依賴，而其下面有兩個項目app_A和app_B，它們也依賴packageA。如果我們用dependencies而不是peerDepenedencies來聲明，那么npm install安裝完項目之后的依賴結構如下圖所示：

　從上圖可以看出，packageA依賴包被安裝了3次，造成了2次安裝冗余。

　　而如果采用peerDepenedency來下載，就可以避免這個核心依賴庫被重復下載的問題。還是上面那個場景，我們在項目app_A和app_B的package.json文件里的peerDependencies字段聲明一下核心依賴庫packageA，然后在根目錄的package.json文件里的dependencies字段也聲明一下packageA。

接著再執(zhí)行npm install，生成的依賴結構就會如下圖所示：

如上圖所示，packageA就只會被安裝一次?？梢钥吹竭@時候生成的依賴圖是扁平的，packageA 也只會被安裝一次。

　　因此我們總結下在插件使用dependencies聲明依賴庫的特點：

• 如果用戶顯式依賴了核心庫，則可以忽略各插件的peerDependencies聲明；

• 如果用戶沒有顯式依賴核心庫，則按照插件peerDependencies中聲明的版本將庫安裝到項目根目錄中；

• 當用戶依賴的版本、各插件依賴的版本之間不相互兼容，會報錯讓用戶自行修復。

　　npm 從版本v7開始，install就默認以peerDependencies的方式去下載了：

1. 如果用戶在根目錄的package.json文件里顯式依賴了核心庫，那么各個子項目里的peerDepenedencies聲明就可以忽略

2. 如果用戶沒有顯式依賴核心庫，那么就按照子項目的peerDepenedencies中聲明的版本將依賴安裝到項目根目錄里

　　而方式2就會導致一個問題：用戶依賴的包版本與各個子項目依賴的包版本相互不兼容，那么就會報錯（無法解析依賴樹的問題（依賴沖突））讓用戶自行去修復，因而導致安裝過程的中斷。（因為是從npm v7引入的，因此npm v3-v6就不會發(fā)生這個錯誤）

3、npm install xxxx --legacy-peer-deps命令是什么？為什么可以解決下載時候產生的依賴沖突呢？

　　npm install xxxx --legacy-peer-deps命令與其說是告訴npm要去干什么，不如說是告訴npm不要去干什么。

　　legacy的意思：遺產/（軟件或硬件）已過時但因使用范圍廣而難以替代的；而npm install xxxx --legacy-peer-deps命令用于繞過peerDependency里依賴的自動安裝；它告訴npm忽略項目中引入的各個依賴模塊之間依賴相同但版本不同的問題，以npm v3-v6的方式去繼續(xù)執(zhí)行安裝操作

　　所以其實該命令并沒有真的解決沖突，而是忽略了沖突，以“過時”（v3-v6）的方式進行下載操作

4、--legacy-peer-deps命令作用

　　在NPM v7中，現在默認安裝peerDependencies。在很多情況下，這會導致版本沖突，從而中斷安裝過程

　　--legacy-peer-deps標志是在v7中引入的，目的是繞過peerDependency自動安裝；它告訴 NPM 忽略項目中引入的各個modules之間的相同modules但不同版本的問題并繼續(xù)安裝，保證各個引入的依賴之間對自身所使用的不同版本modules共存文章來源地址http://www.zghlxwxcb.cn/news/detail-425621.html