peerDependencies WARNING问题剖析

peerDependencies是npm一个比较早的概念，以前一直没有注意过，因为它主要是跟插件的开发相关，直到最近负责做一些插件开发，才接触到这个东西。

我们对dependencies和devDependencies应该都很熟悉了，但是除了它们两个以外，package.json里还可以配置一个叫peerDependencies的配置。

那么这个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的依赖就可以直接引用。

为什么在项目中不用声明就可以直接使用呢？这就是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文件夹中。

在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的依赖。

参考链接：peerDependencies介绍及简析
参考链接：PeerDependencies
参考链接：探讨npm依赖管理之peerDependencies

peerDependencies WARNING问题剖析相关推荐

peerDependencies WARNING 警告剖析
在学 React 过程中,为了方便写 CSS 样式就安装了 sass 和 sass-loader 模块.然后愉快的执行 npm start,结果控制台抛出了警告,这样的警告在之前的 Vue 项目中也偶 ...
peerDependencies WARNING webpack-cli@* requires a peer of webpack@4.x.x || 5.x.x but none was instal
peerDependencies WARNING webpack-cli@* requires a peer of webpack@4.x.x || 5.x.x but none was instal ...
webpack——快速入门【一】
学习webpack https://github.com/webproblem/learning-article#webpack https://github.com/lengziyu/learn-w ...
npm创建Vue工程【element UI】
npm创建Vue工程[element UI] 步骤 # 初始化一个名为 hello-vue 的Vue工程 vue init webpack hello-vue# 进入 hello-vue 工程 cd ...
详解从零搭建企业级 vue3 + vite2+ ts4 框架全过程
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群本文不仅仅是搭建个脚手架这么简单,还会带你了解每一步.甚至每一个配置项的作用,和每个配置的知 ...
JavaApp自动化测试系列[v1.0.0][Appium开发环境搭建]
Appium 是一个开源工具,用于自动化 iOS 手机. Android 手机和 Windows 桌面平台上的原生.移动 Web 和混合应用.「原生应用」指那些用 iOS. Android 或者 Wi ...
vue3 项目中如何输出webpack的config.js
这个配置文件的获取方法: Microsoft Windows [版本 10.0.16299.1932] (c) 2017 Microsoft Corporation.保留所有权利. C:\Users\ ...
windows系统安装VUE 踩地雷合集(使用webpack-simple)
首先是下载一个node.js安装包.目前就下最新的吧.(下载最新版本可能要降版本),然后安装cnpm的淘宝镜像.安装之前建议参阅npm的安装机制. 本文档参考自:Jinkey原创Vue2.0 新手完全 ...
Duwamish深入剖析-配置篇
Duwamish深入剖析-配置篇摘要: 本文详细介绍了Duwamish网上电子书店的Web.config配置文件的结构处理方式以及用途,阐述了配置文件的各功能模块中的作用. 目录: 引言配置节处理 ...

peerDependencies WARNING问题剖析

peerDependencies WARNING问题剖析相关推荐

最新文章

热门文章