Question

CommonJS noob在这里，我读到了浏览器并认为它比我现有的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">

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

Answer 1

这种情况是external requires的用途。我不熟悉browserify的命令行，但在使用JavaScript API时，您可以执行以下操作。这会将常见的依赖关系捆绑在一起。然后可以引用它们作为＆＃34; externals＆＃34;通过你的其他捆绑包。

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避免代码重复

2 个答案: