雅荷心语博客
雅荷心语
心之所向便是光
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 关注本站
    • 微信
    • 微博
    • 腾讯微博
    • Twitter
    • Facebook
    • RSS订阅
Hi, 请登录     我要注册     找回密码

npm依赖管理之peerDependencies理解

2022-11-09 分类:前端之旅 阅读(177) 评论(0)

引言

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

npm2中dependencies与peerDependencies区别

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

1
2
3
4
5
{
    "dependencies": {
        "PackageB": "1.0.0"
    }
}

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

1
2
3
4
5
MyProject
|- node_modules
   |- PackageA
      |- node_modules
         |- PackageB

那么在我们的项目中,我们能通过下面语句引入”PackageA”:

1
var packageA = require('PackageA')

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

1
2
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的引入

为了解决这种问题:

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

1
2
3
4
5
{
    "peerDependencies": {
        "PackageB": "1.0.0"
    }
}

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

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

1
2
3
4
MyProject
|- node_modules
   |- PackageA
   |- PackageB

你可能注意到:

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

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

1
2
var packageA = require('PackageA')
var packageB = require('PackageB')

 

总结一句话,peerDependencies的具体作用:

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

举个例子,就拿目前基于react的ui组件库ant-design@3.x来说,因该ui组件库只是提供一套react组件库,它要求宿主环境需要安装指定的react版本。具体可以看它package.json中的配置:

1
2
3
4
  "peerDependencies": {
    "react": ">=16.0.0",
    "react-dom": ">=16.0.0"
  }

它要求宿主环境安装react@>=16.0.0和react-dom@>=16.0.0的版本,而在每个antd组件的定义文件顶部:

1
2
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时,你会得到一个警告提示说:

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

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

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

 

从npm v3.0开始,peerDependencies 对等依赖项不会自动安装在npm install,而且手动安装它们可能会很麻烦。这个  install-peerdeps   工具使过程快速而简单。

也适用于yarn

传送门 install-peerdeps

 

转载来自: https://www.cnblogs.com/taohuaya/p/14557509.html

分享到:更多 ()

相关推荐

  • tinygo 安装及编译 wasm 笔记
  • go 语言编译wasm 在浏览器端实现cbc模式加解密
  • Service Worker简介及用法介绍
  • 创建全新的 react 项目
  • 教你在npm上发布自己的vue组件
  • 关于对逐帧动画的一次研究
  • 关于如何获取浏览器的设备指纹的调研
  • 关于对fluent-ffmpeg的一次简单尝试

评论 抢沙发

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
关于我

小天明 北京·朝阳 前端搬砖工程师

碎碎念):(来自公众号)

热门文章

  • 踩坑记录——iphone上safari开启隐身模式时localStorage变为只读-雅荷心语博客踩坑记录——iphone上safari开启隐身模式时localStorage变为只读2017-02-21评论(4)
  • 程序员是怎样一群人-雅荷心语博客程序员是怎样一群人2015-12-08评论(3)
  • git 操作那些小事-雅荷心语博客git 操作那些小事2017-03-04评论(2)
  • PHPStorm10 下载安装破解汉化-雅荷心语博客PHPStorm10 下载安装破解汉化2015-12-15评论(2)
  • call_user_func_array 这个函数什么时候用-雅荷心语博客call_user_func_array 这个函数什么时候用2016-09-02评论(2)
2023年2月
一 二 三 四 五 六 日
« 一    
 12345
6789101112
13141516171819
20212223242526
2728  

最新评论

  • 前端小武 6年前 (2017-04-06)说:
    我看到了layer
  • 丁艳平 6年前 (2017-03-03)说:
  • Dawn 6年前 (2016-09-16)说:
    call_user_func_array最后的例子是错哦,你用bc方法去调用类里 另外一个方法就知道问题所在了。情况1.调用非静态方法 第一个参数应该传[类的实例,调用方法] (既然有类实例了直接-&
  • Dawn 7年前 (2016-06-21)说:
    tp框架设置了全局捕获异常的,这也没什么。坑的是 他捕获了异常。然后全部返回404。。。不知道的 还以为自己网站被删除了
  • Dawn 7年前 (2016-05-17)说:
    构造函数里的判断 用异常机制可能更好一些

左邻右舍

  • Brian's Blog
  • 易水寒
  • 楼教主
  • 贤心
  • 阿米龙

雅荷心语博客 -心之所向便是光

联系我们关于我们

© 2023 雅荷心语博客   网站地图

emlogdux_heademlogdux_footer