正文 

当前位置： 首页 > 技术 > java教程

探讨npm依赖管理之peerdependencies(代码片段)

wonyun wonyun     2023-01-02     187

关键词：

引言

想必前端同学对npm的devDependencies和dependencies都比较熟悉，但是对peerDependencies可能就有点陌生，尤其是没有写过npm包插件的同学，比如之前使用grunt自动化工具的相关插件（如grunt-contrib-jasmine等）或者目前基于某个框架的ui组件库等等，这些都是需要对peerDependencies有一定了解的。下面我们就来说说peerDependencies。

npm2中dependencies与peerDependencies区别

假设我们当前的项目是MyProject，项目中有一些依赖，比方其中有一个依赖包PackageA，该包的package.json文件指定了对PackageB的依赖：


    "dependencies": 
        "PackageB": "1.0.0"

如果我们在我们的MyProject项目中执行npm install PackageA, 我们会发现我们项目的目录结构会是如下形式：

MyProject
|- node_modules
   |- PackageA
      |- node_modules
         |- PackageB

那么在我们的项目中，我们能通过下面语句引入"PackageA"：

var packageA = require(‘PackageA‘)

但是，如果你想在项目中直接引用PackageB:

var packageA = require(‘PackageA‘)
var packageB = require(‘PackageB‘)

这是不行的，即使PackageB被安装过；因为Node只会在“MyProject/node_modules”目录下查找PackageB，它不会在进入PackageA模块下的node_modules下查找。

所以，为了解决这个问题，在MyProject项目package.json中我们必须直接声明对PackageB的依赖并安装。

但是，有时我们不用在当前项目中声明对PackageB的依赖就可以直接引用，尤其是，PackageA是一个类似于grunt的插件，例如grunt-contrib-jshint。

为什么在项目中不用声明就可以直接使用呢？这就不得不说说peerDependencies的作用了。

peerDependencies的引入

为了解决这种问题：

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

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


    "peerDependencies": 
        "PackageB": "1.0.0"

那么，它会告诉npm：如果某个package把我列为依赖的话，那么那个package也必需应该有对PackageB的依赖。

也就是说，如果你npm install PackageA，你将会得到下面的如下的目录结构：

MyProject
|- node_modules
   |- PackageA
   |- PackageB

你可能注意到：

在npm2中，即使当前项目MyProject中没有直接依赖PackageB，该PackageB包依然会安装到当前项目的node_modules文件夹中。

下面的代码现在可以正常工作了，因为两个包在"MyProject/node_modules"中被安装了：

var packageA = require(‘PackageA‘)
var packageB = require(‘PackageB‘)

总结一句话，peerDependencies的具体作用：

peerDependencies的目的是提示宿主环境去安装满足插件peerDependencies所指定依赖的包，然后在插件import或者require所依赖的包的时候，永远都是引用宿主环境统一安装的npm包，最终解决插件与所依赖包不一致的问题。

举个例子，就拿目前基于react的ui组件库[email protected]来说，因该ui组件库只是提供一套react组件库，它要求宿主环境需要安装指定的react版本。具体可以看它package.json中的配置：

  "peerDependencies": 
    "react": ">=16.0.0",
    "react-dom": ">=16.0.0"

它要求宿主环境安装[email protected]>=16.0.0和[email protected]>=16.0.0的版本，而在每个antd组件的定义文件顶部：

import * as React from ‘react‘;
import * as ReactDOM from ‘react-dom‘;

组件中引入的react和react-dom包其实都是宿主环境提供的依赖包。

npm2和npm3中peerDependencies的区别

正如上一节谈论的，在npm2中，PackageA包中peerDependencies所指定的依赖会随着npm install PackageA一起被强制安装，所以不需要在宿主环境的package.json文件中指定对PackageA中peerDependencies内容的依赖。

但是在npm3中，peerDependencies的表现与npm2不同：

npm3中不会再要求peerDependencies所指定的依赖包被强制安装，相反npm3会在安装结束后检查本次安装是否正确，如果不正确会给用户打印警告提示。

就拿上面的例子来说，如果我们npm install PackageA安装PackageA时，你会得到一个警告提示说：

PackageB是一个需要的依赖，但是没有被安装。

这时，你需要手动的在MyProject项目的package.json文件指定PackageB的依赖。

另外，在npm3的项目中，可能存在一个问题就是你所依赖的一个package包更新了它peerDependencies的版本，那么你可能也需要在项目的package.json文件中手动更新到正确的版本。否则会出现类似下图所示的警告信息：

技术分享图片

参考

1、Peer Dependencies
2、package.json文件
3、Dealing with the deprecation of peerDependencies in NPM 3



使用 NPM 管理文件依赖项

】使用NPM管理文件依赖项【英文标题】：ManagefiledependencieswithNPM【发布时间】：2015-04-0600:03:20【问题描述】：我正在与一个中型团队一起开发一个大型前端应用程序。到目前为止，我们一直在使用requirejs和AMD模块来管理我们约500... 查看详情

探讨之医院门诊管理系统

需求：医院为私人医院，规模在50人左右，目前该医院已经接入全市his系统，但是想私下建立一个门诊管理系统，包括挂号，医生就诊，之后的各科室检查，这其中又包括检查项目的缴费，药品的消费，已知该医院没有自己的数... 查看详情

转如何使用npm来管理你的node.js依赖

npm是Node.js的模块依赖管理工具。作为开发者使用的工具，主要解决开发Node.js时会遇到的问题。如同RubyGems对于Ruby开发者和Maven对于Java开发者的重要性，npm对与Node.js的开发者和社区的重要性不言而喻。本文包括五点：package.json、... 查看详情

JavaScript 依赖管理：npm vs. bower vs.volo [关闭]

】JavaScript依赖管理：npmvs.bowervs.volo[关闭]【英文标题】：JavaScriptdependencymanagement:npmvs.bowervs.volo[closed]【发布时间】：2013-02-1202:16:07【问题描述】：你如何比较npm、bower和volo？这三个都可用于为UI项目安装JavaScript依赖项。我知道npm... 查看详情

JavaScript 依赖管理：npm vs. bower vs.volo [关闭]

】JavaScript依赖管理：npmvs.bowervs.volo[关闭]【英文标题】：JavaScriptdependencymanagement:npmvs.bowervs.volo[closed]【发布时间】：2013-02-1202:16:07【问题描述】：你如何比较npm、bower和volo？这三个都可用于为UI项目安装JavaScript依赖项。我知道npm... 查看详情

如何通过 NPM 管理非节点模块作为 Node Project 的依赖项？

】如何通过NPM管理非节点模块作为NodeProject的依赖项？【英文标题】：Howtomanageanon-nodemoduleasdependencyforNodeProjectthorughNPM?【发布时间】：2020-04-1509:05:03【问题描述】：我在我的项目中使用bower进行依赖管理。但现在我想转向node和npm... 查看详情

nodejsyarn替代npm的包管理——快速安全可靠性高的依赖管理

Yarn能帮你解决的五件事转自： http://www.qingpingshan.com/jb/javascript/185590.html 长话短说（TL;DR）：在JavaScript领域有多个包管理器，举几个来说： npm ， bower ， component 和 volo 。截至写本文，最 查看详情

应用一：vue之搭建开发环境

...的开发环境搭建流程~ 1、安装nodeJS　　vue的运行是要依赖于node的npm的管理工具来实现，下载地址https://nodejs.org/en/。安装完成之后以管理员身份运行cmd，输入node-v，查看node版本号，出现版本号则说明安装成功。 2、安装淘... 查看详情

nodejs基础之包管理工具npm(代码片段)

✍🔥Nodejs冲浪笔记地址🔥Nodejs基础之JavaScript模块化(一)https://blog.csdn.net/Augenstern_QXL/article/details/119941988🔥nodejs基础之包管理工具npm(二)https://blog.csdn.net/Augenstern_QXL/article/details/ 查看详情

对于内部依赖特定版本的不同包，如何管理项目中多个版本的 npm 模块？

】对于内部依赖特定版本的不同包，如何管理项目中多个版本的npm模块？【英文标题】：Howtomanagemultipleversionsofnpmmodulesinaprojectfordifferentpackagesinternallydependentonspecificversions?【发布时间】：2022-01-1302:40:32【问题描述】：我的主要反... 查看详情

npm包的发布和管理(代码片段)

...哪下载。更重要的是，如果我们要使用模块A，而模块A又依赖于模块B，模块B又依赖于模块C和模块D，npm可以根据依赖关系，把所有依赖的包都下载下来并管理起来。否则，靠我们自己手动管理，肯定既麻烦又容易出错。npm的基础... 查看详情

如何使用npm？cnpm又是什么？

...js的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）,NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，它是Node获得成功的重要原因之一。常见的使用场景有以下几种：允许用户从NPM服务器... 查看详情

npm&yarn包管理机制(代码片段)

... 原文链接npm&yarn包管理机制背景使用npm或yarn管理项目依赖时，可能会产生以下疑问：项目依赖出现问题怎么办？删了重装，即先删除node_modules再重新install，那这样的操作会不会存在风险？把所有依赖... 查看详情

bower程序包管理器与npm的对比及handlebars包的使用实例

...成部分。bower并没有做别的事-它仅仅安装你需要的包及其依赖的正确版本。2、**依赖node环境，window用户必须安装git工具。安装和升级bower必须用npm。3、npm和bower的最大区别，就是npm支持嵌套地依赖管理（） 查看详情

一文弄懂npm&yarn包管理机制（深度解析！）

背景使用npm或yarn管理项目依赖时，可能会产生以下疑问：项目依赖出现问题怎么办？删了重装，即先删除node_modules再重新install，那这样的操作会不会存在风险？把所有依赖都安装到dependencies中，不区... 查看详情

npm的常用操作

...都表示确定执行完之后会自动生成一个package.json文件添加依赖：npm-i(install)jquery安装jQuery默认从当前目录找，找不到网上自动下载删除依赖：npmuninstallxxxxx更新依赖：npmupdatexxxxx‘ 之后所有的依赖包都会安装到这里{"_from":"boots... 查看详情

Yarn 包管理器：从私有 Bitbucket 存储库安装依赖项

】Yarn包管理器：从私有Bitbucket存储库安装依赖项【英文标题】：Yarnpackagemanager:installdependenciesfromprivateBitbucketrepository【发布时间】：2017-09-2805:29:04【问题描述】：我正在尝试将项目从NPM迁移到Yarn。我的部分节点依赖项是托管在Bi... 查看详情

maven之依赖管理

最简单的依赖<projectxmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns="http://maven.apache.org/POM/4.0.0"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0http 查看详情