如何防止浏览器化包含多个版本的子依赖项

Question

在我的前端代码中，我使用require()来拉入库，而库又依赖于不同版本的Underscore.js。因此，当我使用 browserify 将所有内容捆绑在一起时，输出包含多个 Underscore 副本。有没有办法告诉浏览器require('underscore')应该始终导入特定文件？

作为问题的演示，假设我有以下依赖项：

// package.json
"dependencies": {
  // Depends on underscore 1.7.0
  "backbone": "^1.1.2",
  // Depends on underscore 1.6.0
  "backbone.marionette": "^2.3.0"
}

在main.js中，我使用两个库：

// main.js
var Backbone = require('backbone');
var Marionette = require('backbone.marionette');
console.log("Hello, world!");

当我创建捆绑包时，包括多个版本的下划线：

PS> browserify main.js -o out.js
PS> findstr _.VERSION out.js
  _.VERSION = '1.7.0';
  _.VERSION = '1.6.0';

（我创建了一个带有更完整示例的 GitHub 存储库。克隆它并运行npm install && npm test以查看它的实际效果）

我尝试在package.json中添加一个browser部分，如下所示，但似乎没有任何效果：

// package.json
"browser": {
  "underscore": "./node_modules/underscore/underscore.js"
}

我理解为什么npm安装重复的依赖项（对于服务器端代码这样做是有意义的），但是在使用浏览器时处理这个问题的正确方法是什么？

Answer 1

Browserify 中存在重复检测，应避免多次加载同一版本。但是，如果node_modules树包含同一模块的多个副本，则此检测可能（应该？）失败。

我正在使用的解决方案是使用 npm 对包结构进行重复数据删除：

npm dedupe

这只会在您的依赖树中留下不可避免的重复，并且它会记录有关这些重复的警告，以便您可以仔细检查。