如何在浏览器中以编程方式使用factory-bundle？ [英] How can I use factor-bundle with browserify programmatically?

问题描述

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

I want to use factor-bundle to find common dependencies for my browserify entry points and save them out into a single common bundle:

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

因子捆绑文档使它在命令行上看起来非常容易，但是我想以编程方式实现它，而我正竭尽全力。

The factor-bundle documentation makes it seem very easy to do on the command line, but I want to do it programmatically and I'm struggling to get my head around it.

我当前的脚本是这个（我也在使用reactify来转换react的jsx文件）：

My current script is this (I'm using reactify to transform react's jsx files too):

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作为插件，并指定所需的每个输入文件的输出文件（即文件中的每个条目）

I'm trying to figure out how to use factor-bundle as a plugin, and specify the desired output file for each of the input files (ie each entry in files)

推荐答案

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

我能够通过将factor-bundle用作browserify插件来使它正常工作。我尚未测试您的特定代码，但是模式应该相同：

I was able to get this working by using factor-bundle as a browserify plugin. I haven't tested your specific code, but the pattern should be the same:

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

factory-bundle插件采用输出选项 o ，其索引必须与条目文件相同。

The factor-bundle plugin takes output options o which need to have the same indexes as the entry files.

很遗憾，此后我还没有弄清楚如何处理这些文件，因为我似乎无法访问factor-bundle的流事件。因此，对于缩小等，可能还需要通过browserify插件来完成。

Unfortunately, I haven't figured out how to do anything else with these files after this point because I can't seem to access factor-bundle's stream event. So for minification etc, it might need to be done also via a browserify plugin.

这篇关于如何在浏览器中以编程方式使用factory-bundle？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！