Question

我想使用factor-bundle来查找我的browserify入口点的公共依赖项，并将它们保存到一个公共捆绑包中：

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

因子包文档使得在命令行上看起来很容易，但是我想以编程方式进行操作，并且我很难理解它。

我当前的脚本是这样的（我正在使用reactify来转换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作为插件，并为每个输入文件指定所需的输出文件（即files中的每个条目）

Answer 1

这个答案已经很晚了，所以你可能已经找到了解决方案或解决了这个问题。我正在回答这个问题，因为它与my question非常相似。

我能够通过使用factor-bundle作为browserify插件来实现这一点。我还没有测试过您的特定代码，但模式应该是相同的：

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的流事件。因此，对于缩小等，可能还需要通过browserify插件来完成。

Answer 2

我创建了grunt-reactify以允许您拥有JSX文件的包文件，以便更轻松地使用模块化的React组件。您所要做的就是指定父目标文件夹和源文件：

＆＃13;

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

＆＃13;

如何以编程方式使用factorify与browserify？

2 个答案: