如何以编程方式将 factor-bundle 与 browserify 结合使用？

IT技术 node.js reactjs browserify
2021-05-02 07:17:53

我想使用 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);
});

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

2个回答

这个答案已经很晚了，因此您可能已经找到了解决方案或解决此问题的方法。我正在回答这个，因为它与我的问题非常相似。

我能够通过使用 factor-bundle 作为浏览器插件来实现这一点。我还没有测试你的具体代码，但模式应该是一样的：

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 插件来完成。

我创建了grunt-reactify来允许你有一个 JSX 文件的包文件，以便更容易地使用module化的 React 组件。您所要做的就是指定一个父目标文件夹和源文件：

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

其它你可能感兴趣的问题
上一篇在温度波动的环境中打印时直接与鲍登挤出 下一篇为什么 Ender 5 Pro 的所有轴电机（X、Y 和 Z）都停止移动（同时）？