如何以编程方式将因子捆绑与 browserify 一起使用？

Posted 2023-02-21

【中文标题】如何以编程方式将因子捆绑与 browserify 一起使用？

【英文标题】：How can I use factor-bundle with browserify programmatically?

【发布时间】：2014-04-09 02:47:38

【问题描述】：

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

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

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);
);

我正在尝试弄清楚如何使用因子捆绑作为插件，并为每个输入文件指定所需的输出文件（即files 中的每个条目）

【问题讨论】：

你可以使用 bundle.plugin(factor, opts) 吗？

理论上是可以的，但是我不知道怎么用，即选项应该是什么

是的，我目前也在努力解决这个问题。

【参考方案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 插件来完成。

【参考方案2】：

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

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