最近在搞webpack@4.x的时候，安装各种插件后总是会出现UNMET PEER DEPENDENCY这个东西，它到底是个什么错误呢？

    我们还记得刚接触node(node<5.0, npm<3.0)的时候，依赖是层层安装的，比如某个项目同时依赖了a和b，a和b又同时依赖了c，那么项目的结构会是这样的：
|--a--c
|--b--c
    是的，c会被安装两次，虽然看起来有些蠢，但这很好的解决了a和b可能会同时依赖不同版本的c的情况。

    后来(node>=5.0, npm>=3.0)的时候做了一些优化，还是上面的例子，如果a和b所依赖的c在同一个版本区间，那么将会只装一个c，并且装到顶层和a、b同级：
|--a
|--b
|--c

    更详细的规则在我的这篇文章中有提到。这样就解决了重复安装的问题，但是还有一个问题没有得到解决，那就是插件的问题。比如我们发布了一个名字叫做webpack-plugin-a的插件，他只是webpack的一个插件，并不依赖webpack，所以不会把webpack写入自身的dependencies或者devDependencies，但是它又确实需要针对特定的webpack版本来进行开发。设想以下场景：

        1.我们开发webpack-plugin-a@1.0.0的时候是针对webpack@2.0.0来开发的
        2.webpack发布了最新的webpack@3.0.0并且做了不兼容升级，导致webpack-plugin-a@1.0.0已经不能在该版本使用
        3.有不明真相的开发者，安装了webpack@3.0.0和我们的webpack-plugin-a@1.0.0

    悲剧发生了，由于webpack版本不兼容，当该开发者执行编译的时候肯定是要报错的。那么如何避免这种问题的发生呢？聪明的npm维护者们想到了使用peerDependencies来指定所需要兼容的宿主包的版本，我们在webpack-plugin-a@1.0.0的package.json中添加如下配置：

[JavaScript] 纯文本查看 复制代码

"peerDependencies": {
    "webpack": "^2.0.0"
}

    这样就指定了webpack-plugin-a@1.0.0只兼容webpack@2.x.x，当用户同时安装webpack@3.0.0和webpack-plugin-a@1.0.0的时候就会抛出：

[JavaScript] 纯文本查看 复制代码

UNMET PEER DEPENDENCY [url=mailto:webpack@3.0.0]webpack@3.0.0[/url]
npm WARN [url=mailto:webpack-plugin-a@1.0.0]webpack-plugin-a@1.0.0[/url] requires a peer of webpack@^2.0.0 but none was installed

原帖链接：https://xwenliang.cn/p/5af2a97d5a8a996548000003

    最近在搞webpack@4.x的时候，安装各种插件后总是会出现UNMET PEER DEPENDENCY这个东西，它到底是个什么错误呢？

    我们还记得刚接触node(node<5.0, npm<3.0)的时候，依赖是层层安装的，比如某个项目同时依赖了a和b，a和b又同时依赖了c，那么项目的结构会是这样的：
|--a--c
|--b--c
    是的，c会被安装两次，虽然看起来有些蠢，但这很好的解决了a和b可能会同时依赖不同版本的c的情况。

    后来(node>=5.0, npm>=3.0)的时候做了一些优化，还是上面的例子，如果a和b所依赖的c在同一个版本区间，那么将会只装一个c，并且装到顶层和a、b同级：
|--a
|--b
|--c

    更详细的规则在我的这篇文章中有提到。这样就解决了重复安装的问题，但是还有一个问题没有得到解决，那就是插件的问题。比如我们发布了一个名字叫做webpack-plugin-a的插件，他只是webpack的一个插件，并不依赖webpack，所以不会把webpack写入自身的dependencies或者devDependencies，但是它又确实需要针对特定的webpack版本来进行开发。设想以下场景：

        1.我们开发webpack-plugin-a@1.0.0的时候是针对webpack@2.0.0来开发的
        2.webpack发布了最新的webpack@3.0.0并且做了不兼容升级，导致webpack-plugin-a@1.0.0已经不能在该版本使用
        3.有不明真相的开发者，安装了webpack@3.0.0和我们的webpack-plugin-a@1.0.0

    悲剧发生了，由于webpack版本不兼容，当该开发者执行编译的时候肯定是要报错的。那么如何避免这种问题的发生呢？聪明的npm维护者们想到了使用peerDependencies来指定所需要兼容的宿主包的版本，我们在webpack-plugin-a@1.0.0的package.json中添加如下配置：

[JavaScript] 纯文本查看 复制代码

"peerDependencies": {
    "webpack": "^2.0.0"
}

    这样就指定了webpack-plugin-a@1.0.0只兼容webpack@2.x.x，当用户同时安装webpack@3.0.0和webpack-plugin-a@1.0.0的时候就会抛出：

[JavaScript] 纯文本查看 复制代码

UNMET PEER DEPENDENCY [url=mailto:webpack@3.0.0]webpack@3.0.0[/url]
npm WARN [url=mailto:webpack-plugin-a@1.0.0]webpack-plugin-a@1.0.0[/url] requires a peer of webpack@^2.0.0 but none was installed

原帖链接：https://xwenliang.cn/p/5af2a97d5a8a996548000003