在将npm用于前端项目时，避免捆绑中出现重复的模块

Question

Npm允许在项目中使用同一软件包的多个版本。这是一个强大的功能。

但是，在大多数前端项目中，我认为不希望依赖于不同版本的同一库。

对不同版本的同一库有依赖性意味着最终用户将必须多次加载给定的库（作为单独的请求或作为更大捆绑包的一部分）。

但是，如果使用npm来管理前端项目的依赖项，则可以很快获得对不同版本中相同库的依赖项。

我认为在大多数情况下这是不希望的，而且大多数时候我们甚至都不了解这种情况。

一个简单的情况，我们最终遇到这种情况：

在某个时间点安装react-router和history在项目中：

npm i -S react-router@1.0.0-rc1
npm i -S history@1.17.0   

当时react-router有一个依赖history@1.17.0。因此，您的整个项目仅依赖于此版本的history。

稍后，您决定升级到以下最新版本react-router：

npm i -S react-router@2

现在react-router依赖history@2。

因此，您的项目现在已经依赖于history@1.17.0和传递依赖于history@2。

的两个版本history都包含在您的中npm_modules。

如果您使用的是Webpack或Browerify之类的模块捆绑程序，则最终会得到包含两个版本的的捆绑包history。

很可能您没有注意到。但是，如果您会注意到，则可能会将直接依赖项升级为`history @ 2。

我们如何处理这个问题？

我们如何找出前端项目是否依赖于不同版本的同一库？

我们如何避免最终获得比应有的束更大的束？

我知道从技术上讲npm / Webpack / Browserify在捆绑包中包含对不同版本的同一库的依赖关系是正确的。但是我正在寻找一种方法，以使其易于观察到这种情况的发生，以便开发人员可以采取步骤来优化依赖关系。

我还在此仓库中重新创建了示例：https : //github.com/jbandi/npm-package-problems

Answer 1

find -duplicate-dependencies工具可用于检查node_modules目录并报告存在多个版本的包。

我想在某种程度上解决这个问题是有意义的node_modules，因为这样做在 WebPack 和 Browserify 情况下都有效。