引言

想必前端同學(xué)對(duì)npm的devDependencies和dependencies都比較熟悉，但是對(duì)peerDependencies可能就有點(diǎn)陌生，尤其是沒(méi)有寫過(guò)npm包插件的同學(xué)，比如之前使用grunt自動(dòng)化工具的相關(guān)插件(如grunt-contrib-jasmine等)或者目前基于某個(gè)框架的ui組件庫(kù)等等，這些都是需要對(duì)peerDependencies有一定了解的。下面我們就來(lái)說(shuō)說(shuō)peerDependencies。

npm2中dependencies與peerDependencies區(qū)別

假設(shè)我們當(dāng)前的項(xiàng)目是MyProject，項(xiàng)目中有一些依賴，比方其中有一個(gè)依賴包PackageA，該包的package.json文件指定了對(duì)PackageB的依賴：

{

"dependencies": {

"PackageB": "1.0.0"

}

}

如果我們?cè)谖覀兊腗yProject項(xiàng)目中執(zhí)行npm install PackageA, 我們會(huì)發(fā)現(xiàn)我們項(xiàng)目的目錄結(jié)構(gòu)會(huì)是如下形式：

MyProject

|- node_modules

|- PackageA

|- node_modules

|- PackageB

那么在我們的項(xiàng)目中，我們能通過(guò)下面語(yǔ)句引入"PackageA"：

var packageA = require('PackageA')

但是，如果你想在項(xiàng)目中直接引用PackageB:

var packageA = require('PackageA')

var packageB = require('PackageB')

這是不行的，即使PackageB被安裝過(guò)；因?yàn)镹ode只會(huì)在“MyProject/node_modules”目錄下查找PackageB，它不會(huì)在進(jìn)入PackageA模塊下的node_modules下查找。

所以，為了解決這個(gè)問(wèn)題，在MyProject項(xiàng)目package.json中我們必須直接聲明對(duì)PackageB的依賴并安裝。

但是，有時(shí)我們不用在當(dāng)前項(xiàng)目中聲明對(duì)PackageB的依賴就可以直接引用，尤其是，PackageA是一個(gè)類似于grunt的插件，例如grunt-contrib-jshint。

為什么在項(xiàng)目中不用聲明就可以直接使用呢？這就不得不說(shuō)說(shuō)peerDependencies的作用了。

peerDependencies的引入

為了解決這種問(wèn)題：

如果你安裝我，那么你最好也安裝X,Y和Z.

于是peerDependencies就被引入了。例如上面PackageA的package.json文件如果是下面這樣：

{

"peerDependencies": {

"PackageB": "1.0.0"

}

}

那么，它會(huì)告訴npm：如果某個(gè)package把我列為依賴的話，那么那個(gè)package也必需應(yīng)該有對(duì)PackageB的依賴。

也就是說(shuō)，如果你npm install PackageA，你將會(huì)得到下面的如下的目錄結(jié)構(gòu)：

MyProject

|- node_modules

|- PackageA

|- PackageB

你可能注意到：

在npm2中，即使當(dāng)前項(xiàng)目MyProject中沒(méi)有直接依賴PackageB，該P(yáng)ackageB包依然會(huì)安裝到當(dāng)前項(xiàng)目的node_modules文件夾中。

下面的代碼現(xiàn)在可以正常工作了，因?yàn)閮蓚€(gè)包在"MyProject/node_modules"中被安裝了：

var packageA = require('PackageA')

var packageB = require('PackageB')

總結(jié)一句話，peerDependencies的具體作用：

peerDependencies的目的是提示宿主環(huán)境去安裝滿足插件peerDependencies所指定依賴的包，然后在插件import或者require所依賴的包的時(shí)候，永遠(yuǎn)都是引用宿主環(huán)境統(tǒng)一安裝的npm包，最終解決插件與所依賴包不一致的問(wèn)題。

舉個(gè)例子，就拿目前基于react的ui組件庫(kù)ant-design@3.x來(lái)說(shuō)，因該ui組件庫(kù)只是提供一套react組件庫(kù)，它要求宿主環(huán)境需要安裝指定的react版本。具體可以看它package.json中的配置：

"peerDependencies": {

"react": ">=16.0.0",

"react-dom": ">=16.0.0"

}

它要求宿主環(huán)境安裝react@>=16.0.0和react-dom@>=16.0.0的版本，而在每個(gè)antd組件的定義文件頂部：

import * as React from 'react';

import * as ReactDOM from 'react-dom';

組件中引入的react和react-dom包其實(shí)都是宿主環(huán)境提供的依賴包。

npm2和npm3中peerDependencies的區(qū)別

在npm2中，PackageA包中peerDependencies所指定的依賴會(huì)隨著npm install PackageA一起被強(qiáng)制安裝，所以不需要在宿主環(huán)境的package.json文件中指定對(duì)PackageA中peerDependencies內(nèi)容的依賴。

但是在npm3中，peerDependencies的表現(xiàn)與npm2不同：

npm3中不會(huì)再要求peerDependencies所指定的依賴包被強(qiáng)制安裝，相反npm3會(huì)在安裝結(jié)束后檢查本次安裝是否正確，如果不正確會(huì)給用戶打印警告提示。

就拿上面的例子來(lái)說(shuō)，如果我們npm install PackageA安裝PackageA時(shí)，你會(huì)得到一個(gè)警告提示說(shuō)：

PackageB是一個(gè)需要的依賴，但是沒(méi)有被安裝。

這時(shí)，你需要手動(dòng)的在MyProject項(xiàng)目的package.json文件指定PackageB的依賴。

另外，在npm3的項(xiàng)目中，可能存在一個(gè)問(wèn)題就是你所依賴的一個(gè)package包更新了它peerDependencies的版本，那么你可能也需要在項(xiàng)目的package.json文件中手動(dòng)更新到正確的版本。否則會(huì)出現(xiàn)類似下圖所示的警告信息：

參考

總結(jié)

以上是生活随笔為你收集整理的npm依赖管理java_探讨npm依赖管理之peerDependencies的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。