如何使用 Browserify 避免代码重复

Question

这里是 CommonJS noob，我阅读了有关 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 包。

Answer 1

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

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">

Answer 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

如何使用 Browserify 避免代码重复

How to avoid code duplication using Browserify

javascript

browserify

commonjs