快速解決NPM報(bào)錯(cuò):peerDependencies WARNING

問(wèn)題背景

今天遇到一個(gè)問(wèn)題:安裝Webpack 3.x之后其它包提示peerDependencies WARNING,意思是包版本不兼容。

【難題】雖然NPM已經(jīng)很自動(dòng)化了,但依賴問(wèn)題真的是一個(gè)難題,無(wú)法自動(dòng)解決,需要人工干預(yù)調(diào)整。StackOverflow上的這篇問(wèn)答也說(shuō)了該問(wèn)題無(wú)法自動(dòng)處理。

【解決辦法】去查各個(gè)版本的依賴關(guān)系,人工調(diào)整版本號(hào)。每個(gè)包的依賴關(guān)系都是放在package.json里面的,一個(gè)個(gè)版本去看當(dāng)然很麻煩,這里介紹一個(gè)小技巧。

問(wèn)題重現(xiàn)

例如我們現(xiàn)在安裝了Webpack 3,package.json如下:

{
  "devDependencies": {
    "webpack": "^3.0.0",
  }
}

但是安裝npm install --save-dev sass-loader的時(shí)候報(bào)錯(cuò)了,
錯(cuò)誤比較明確說(shuō)了sass-loader需要依賴新版的webpack,但是安裝的webpack偏舊:

peerDependencies WARNING sass-loader@^8.0.0 requires a peer of webpack@^4.36.0 but webpack@3.12.0 was installed

解決步驟

現(xiàn)在我們需求明確要用Webpack 3,那只能讓sass-loader降級(jí)了,問(wèn)題是降到哪個(gè)版本呢?這里我們通過(guò)npm view命令來(lái)幫助我們尋找合適的版本。

  1. 首先敲npm view sass-loader versions,這會(huì)告訴我們sass-loader一共有哪些版本:
$ cnpm view sass-loader versions
[
  '0.0.1', '0.0.2', '0.1.0', '0.1.1',
  '0.2.0', '0.3.0', '0.3.1', '0.4.0-beta.1',
   ...
  '7.2.0', '7.3.0', '7.3.1', '8.0.0'
]
  1. 然后我們敲npm view sass-loader@8.0.0 peerDependencies,可以看到果然sass-loader 8.0.0依賴了webpack 4.36.0:
$ npm view sass-loader@8.0.0 peerDependencies
{
  webpack: '^4.36.0',
  'node-sass': '^4.0.0',
  sass: '^1.3.0',
  fibers: '>= 3.1.0'
}
  1. 為了找到能用的舊版,我們只能一個(gè)個(gè)版本檢查,例如我們看看sass-loader 7.3.1能不能用:
$ cnpm view sass-loader@7.3.1 peerDependencies
{ webpack: '^3.0.0 || ^4.0.0' }
  1. 可以看到sass-loader 7.3.1是能兼容webpack 3.x的,那么我們就找到了,然后我們可以修改package.json,將兼容的版本填入:
{
  "devDependencies": {
    "sass-loader": "^7.3.1",
    "webpack": "^3.0.0"
  }
}

總結(jié)

當(dāng)遇到版本依賴問(wèn)題時(shí),只能人工處理。

可以利用npm view <pkgname> [field]快速查看package.json的某個(gè)字段,也可以加上版本號(hào)使用npm view <pkgname>@version,如果不知道一共有哪些歷史版本可以敲npm view <pkgname> versions。npm view的用法見(jiàn)官網(wǎng)文檔

人工尋找版本是不可避免的,為了提升效率可以:

  • 結(jié)合二分法快速縮小范圍
  • 然后嫌國(guó)內(nèi)網(wǎng)速慢可以用cnpm替代npm
  • 版本號(hào)可以指定一個(gè)范圍,例如:npm view bootstrap@^4.0.0
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 非常感謝胖哥的博客和掘金小冊(cè)的技術(shù)分享,希望大家去下面的鏈接去查看原文,他們寫(xiě)的非常好,都是多個(gè)項(xiàng)目經(jīng)驗(yàn)的總結(jié)!!...
    示十閱讀 2,383評(píng)論 0 2
  • 在現(xiàn)在的前端開(kāi)發(fā)中,前后端分離、模塊化開(kāi)發(fā)、版本控制、文件合并與壓縮、mock數(shù)據(jù)等等一些原本后端的思想開(kāi)始...
    Charlot閱讀 5,688評(píng)論 1 32
  • 全局安裝webpack 全局安裝webpack會(huì)有個(gè)問(wèn)題,就是當(dāng)你有兩個(gè)項(xiàng)目依賴于不同版本的webpack,就會(huì)有...
    説好的妹紙呢閱讀 1,964評(píng)論 0 11
  • 前端開(kāi)發(fā)規(guī)范-react/react-router/redux/webpack/es6開(kāi)發(fā)配置 項(xiàng)目地址: htt...
    燕京博士閱讀 2,202評(píng)論 0 1
  • 不知道你有沒(méi)有早戀過(guò),但早戀的人一定知道那種幸福地感覺(jué),比之后所有的幸福都來(lái)得踏實(shí)。 之前跟同學(xué)探討過(guò)該不...
    女王英倫FAN閱讀 267評(píng)論 0 0

友情鏈接更多精彩內(nèi)容