Question

我有一个带有几个特定于页面的js文件的应用程序，并且我正在尝试使用因子包来创建具有共享依赖项的公共js文件。到目前为止，我只能使用browserify和factor-bundle来生成包含所有js的单个文件（common.js）（就像普通的browserify包一样）。这是我的一项任务：

gulp.task('browserify', function() {

    return browserify({
        entries: ['./app/client/page1.coffee', './app/client/page2.coffee'],
        extensions: ['.coffee', '.jade'],
        debug: true
    }).plugin('factor-bundle', {
        o: ['./public/js/page1.js', './public/js/page2.js']
    })
    .bundle()
    .pipe(source('common.js'))
    .pipe(gulp.dest('./public/js/'));

});

这只会在public / js中生成common.js文件，而page1和page2不是单独的文件（它们会嵌入common.js中）。

预期结果
public / js / page1.js（包含page1.coffee代码和仅由page1.coffee使用的任何依赖项）
public / js / page2.js（包含page2.coffee代码和仅由page2.coffee使用的任何依赖项）
public / js / common.js（包含page1.coffee和page2.coffee共享的依赖项）

删除.plugin（...）
如果我删除了.plugin(...)，则common.js中的模块的顺序不同，但是逐字节的大小与.plugin(...)时的大小完全相同。

模块信息

Browserify（5.9.3）
因素包（2.1.0）
乙烯基源流（0.1.1）
Gulp（3.8.7）

Answer 1

我遇到了类似问题并在factor-bundle github帐户上提出了问题：

https://github.com/substack/factor-bundle/issues/29

还没有这样的解决方案，但我找到了解决方法。

如果您使用命令行中的factor-bundle插件运行browserify，您是否发现模块会按预期拆分为单独的页面？

这是我的经验，在这种情况下，我使用gulp-shell作为解决方法，让它作为gulp任务运行：

var gulp  = require('gulp')
var shell = require('gulp-shell')

gulp.task('browserify-shell', shell.task([
  'browserify ./app/assets/js/main.js ./app/assets/js/search.js -p [ factor-bundle -o ./public/js/main.js -o ./public/js/search.js ] -o ./public/js/common.js'
]));

Answer 2

我最终切换到了webpack。当我需要动态模块加载时，我进行了跳转。除了与动态加载模块相关的一小部分之外，根本不需要更改我的代码。

Browserify和factor-bundle只生成一个文件

2 个答案: