如何以编程方式使用browserify的factor-bundle?

我想使用factor-bundle来查找我的browserify入口点的常见依赖项,并将它们保存到一个公共包中:

https://www.npmjs.org/package/factor-bundle

factor-bundle文档使得在命令行上看起来很容易,但是我想以编程的方式进行,而且我正在努力想办法解决这个问题。

我目前的脚本是这样的(我正在使用reatify来转换react的jsx文件):

var browserify = require('browserify'); var factor = require('factor-bundle') var glob = require('glob'); glob('static/js/'/**/*.{js,jsx}', function (err, files) { var bundle = browserify({ debug: true }); files.forEach(function(f) { bundle.add('./' + f); }); bundle.transform(require('reactify')); // factor-bundle code goes here? var dest = fs.createWriteStream('./static/js/build/common.js'); var stream = bundle.bundle().pipe(dest); }); 

我试图找出如何使用factor-bundle作为插件,并为每个input文件(即文件中的每个条目)指定所需的输出文件

这个答案很晚,所以很可能你已经find了一个解决scheme或解决这个问题。 我正在回答这个问题,因为它和我的问题非常相似。

通过使用factor-bundle作为一个browserify插件,我能够得到这个工作。 我还没有testing你的具体代码,但模式应该是相同的:

 var fs = require('fs'), browserify = require('browserify'), factor = require('factor-bundle'); var bundle = browserify({ entries: ['x.js', 'y.js', 'z.js'], debug: true }); // Group common dependencies // -o outputs the entry files without the common dependencies bundle.plugin('factor-bundle', { o: ['./static/js/build/x.js', './static/js/build/y.js', './static/js/build/z.js'] }); // Create Write Stream var dest = fs.createWriteStream('./static/js/build/common.js'); // Bundle var stream = bundle.bundle().pipe(dest); 

factor-bundle插件需要输出选项o需要与输​​入文件具有相同的索引。

不幸的是,在这之后,我还没有想出如何处理这些文件,因为我似乎无法访问factor-bundle的stream事件。 所以对于缩小等,也可能需要通过一个browserify插件来完成。

我已经创build了grunt-reactify来允许你为JSX文件创build一个包文件,以便使用模块化的React组件更容易。 所有你所要做的就是指定一个父目标文件夹和源文件:

 grunt.initConfig({ reactify: { 'tmp': 'test/**/*.jsx' }, })