[npm]解決安裝npm套件時遇到 Conflicting peer dependency 的套件相依性問題
===
###### tags: `Node.js` `前端` `npm`
## 懶人包
執行`npm install --legacy-peer-deps`

說明
---
### 以下以一個Vue專案為例：
* 該專案使用了 `"vue": "2.6.14"`，所以開啟專案根目錄的`node_modules`會看到有`@vue`的函示庫資料夾。且底下還有更多功能區塊的資料夾。

* 然後先關注`cli-plugin-eslint`和`cli-plugin-router`這兩個功能區塊的資料夾。開啟專案根目錄的`package-lock.json`檔可以看到`cli-plugin-eslint`和`cli-plugin-router`這兩個功能區塊的詳細資訊：



:::info
dependencies：你所使用的套件或是函示庫，它要求的專案環境內要有其他那些依賴(有點像是windows安裝環境檢測的概念)。
:::

:::info
peerDependencies(同伴依賴)：你所使用的套件或是函示庫，它要求的專案環境內要有其他那些依賴，**且其他套件也有需要使用到一樣的依賴**，便會由移到peerDependencies區塊。

:::

以上面`cli-plugin-eslint`和`cli-plugin-router`為例它們都有相同的peerDependencies： **@vue/cli-service": "\^3.0.0 || ^4.0.0-0**

問題點
---
* 在NPM v7+版本之後，預設會使用自動使用 `peerDependencies`，原本的美意是希望有重複的`dependencies`時，會拉到`peerDependencies`區塊內寫入**特定的版本**的依賴。大家共用同一個，減少下載的量。

* 所以原本已經下載過的套件它已經在`package-lock.json`寫入了**特定的版本**的`peerDependencies`。但之後要安裝的新套件，它需要的`dependencies`和其他套件==相同==，但版本要求==不同==時。NPM再自動把`dependencies`拉去`peerDependencies`區塊時就會出現版本conflict的錯誤。

完整錯誤訊息：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve                    
npm ERR!                                               
npm ERR! While resolving: @vue/cli-plugin-eslint@4.5.12
npm ERR! Found: eslint@8.7.0
npm ERR! node_modules/eslint
npm ERR!   dev eslint@"8.7.0" from the root project
npm ERR!   peer eslint@"^6.0.0 || ^7.0.0 || ^8.0.0" from @typescript-eslint/eslint-plugin@5.8.1      
npm ERR!   node_modules/@typescript-eslint/eslint-plugin
npm ERR!     dev @typescript-eslint/eslint-plugin@"5.8.1" from the root project
npm ERR!     @typescript-eslint/eslint-plugin@"^5.0.0" from @vue/eslint-config-typescript@10.0.0     
npm ERR!     node_modules/@vue/eslint-config-typescript
npm ERR!       dev @vue/eslint-config-typescript@"10.0.0" from the root project
npm ERR!   11 more (@typescript-eslint/experimental-utils, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@">= 1.6.0 < 7.0.0" from @vue/cli-plugin-eslint@4.5.12
npm ERR! node_modules/@vue/cli-plugin-eslint
npm ERR!   dev @vue/cli-plugin-eslint@"4.5.12" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: eslint@6.8.0
npm ERR! node_modules/eslint
npm ERR!   peer eslint@">= 1.6.0 < 7.0.0" from @vue/cli-plugin-eslint@4.5.12
npm ERR!   node_modules/@vue/cli-plugin-eslint
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 C:\Users\2004012\AppData\Local\npm-cache\eresolve-report.txt for a full report.

## 解決方式說明

在執行 `npm install` 的時候，加上 `--legacy-peer-deps` 參數，命令 NPM 不要使用預設的`peerDependencies`，而是皆下載進`dependencies`，進而忽略不同擴充套件因為相依的套件版本所造成的問題。

#### 參考來源：
[What does npm install --legacy-peer-deps do exactly? When is it recommended / What's a potential use case?](https://stackoverflow.com/questions/66239691/what-does-npm-install-legacy-peer-deps-do-exactly-when-is-it-recommended-wh)

https://github.com/npm/rfcs/blob/main/implemented/0025-install-peer-deps.md