如何使用 Browserify 避免代码重复答案

【问题标题】：How to avoid code duplication using Browserify如何使用 Browserify 避免代码重复
【发布时间】：2015-05-18 01:47:20
【问题描述】：

CommonJS 新手在这里，我阅读了有关 browserify 的信息，并认为它比我现有的 RequireJS 设置更简单，所以我继续更改它们。我发现我将在每个捆绑包中都有代码重复。让我解释一下：

可以说，我有 page1.js 和 page2.js 使用 jquery.js 和 jquery-ui.js

现在我必须创建bundle1.js 和bundle2.js 并且jquery.js 和jquery-ui.js 的内容在每个包中重复。

我尝试通过仅捆绑jquery.js 和jquery-ui.js 将浏览器中的不同文件分开，例如：

<script src="lib_bundle.js">
<script src="page1.js">

问题是page1.js 中的require 会失败，因为它不是commonjs 包。

【问题讨论】：

标签： javascript browserify commonjs

【解决方案1】：

这种情况是external requires 的用途。我不熟悉 browserify 的命令行，但是在使用 JavaScript API 时，您可以执行以下操作。这会将常见的依赖项捆绑在一起。然后它们可以被您的其他捆绑包引用为“外部”。

var browserify = require('browserify');

var externalDependencies = [
  'jquery',
  'jquery-ui'
];

// shared libraries bundle (i.e. jquery, jquery-ui)
var libsBundle = browserify({
  // your options
  // ...
  require: externalDependencies
});

// main bundle (i.e. page1, page2)
var mainBundle = browserify({
  // your options
  // ...
});
mainBundle.external(externalDependencies);

libsBundle.bundle();
mainBundle.bundle();

脚本标签：

<script src="libsBundle.js">
<script src="mainBundle.js">

【讨论】：

天哪，有人实际上解释了如何做到这一点！谢谢！

【解决方案2】：

您还可以使用以下命令行为 jquery 和 jquery-ui 创建单独的包：

browserify -r jquery -r jquery-ui > modules.js

将 <script src="modules.js"></script> 添加到 html 并将 -x jquery -x jquery-ui 添加到您的两个捆绑包中。

browserify -x jquery -x jquery-ui page1.js > bundle1.js
browserify -x jquery -x jquery-ui page2.js > bundle2.js

【讨论】：