[英]Sharing common code across pages with Browserify
我有一个相当大的多页面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做类似的事情? 这样的缓存是否值得,或者将所有页面中的所有内容捆绑到一个文件中更好(考虑到可能只有一个页面可能依赖于大型外部库)?
您可以使用factor-bundle来完成此操作。 您只需将代码拆分为每个文件的不同入口点。
假设您有3页, /a
, /b
和/c
。 每个页面对应的入口点文件/browser/a.js
, /browser.b.js
和/browser/c.js
。 使用factor-bundle,您可以:
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>
如果您不想使用命令行版本,还可以使用API中的 factor-bundle:
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'));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.