使用 Browserify 跨页面共享通用代码

Question

我有一个相当大的多页 javascript 应用程序，它使用 requirejs 来组织代码。我正在研究转向 browserify，因为我喜欢它提供的简单性，并且我已经习惯了 node.js 模块系统。

目前在每个页面上我都有这样的 javascript

<script data-main="/scripts/config/common" src="/scripts/lib/require.js">
<script data-main="/scripts/config/page-specific-js" src="/scripts/lib/require.js">

我有一个共同的构建步骤和每个页面的构建。这样，每个页面的大部分 JS 都会被缓存。

是否可以用 browserify 做类似的事情？这样的缓存是否值得，还是将所有内容捆绑到一个文件中跨所有页面更好（考虑到可能只有一个页面可以依赖于大型外部库）？

Answer 1

您可以使用factor-bundle 来执行此操作。您只需将代码拆分为每个文件的不同入口点。

假设您有 3 个页面，/a、/b 和 /c。每个页面对应一个入口点文件/browser/a.js、/browser.b.js和/browser/c.js。使用因子捆绑，您可以：

browserify -p [ factor-bundle -o bundle/a.js -o bundle/b.js -o bundle/c.js ] \
  browser/a.js browser/b.js browser/c.js > bundle/common.js

超过 1 个入口点使用的任何文件都将被分解到 bundle/common.js 中，而所有特定于页面的代码都将位于特定于页面的捆绑文件中。现在，在每个页面上，您都可以为公共包放置一个脚本标记，为特定页面的包放置一个脚本标记。例如，对于 /a，您可以输入：

<script src="bundle/common.js"></script>
<script src="bundle/a.js"></script>

如果不想使用命令行版本，也可以使用factor-bundle from the API：

var browserify = require('browserify');
var fs = require('fs');

var files = [ './files/a.js', './files/b.js', './files/c.js' ];
var b = browserify(files);
b.plugin('factor-bundle', {
    outputs: [ 'bundle/a.js', 'bundle/b.js', 'bundle/c.js' ]
});
b.bundle().pipe(fs.createWriteStream('bundle/common.js'));