如何使用Browserify和Gulp输出多个捆绑包

Question

我使用Browserify打包文件，效果很好。但是如果我需要生成多个包怎么办？

我想最终得到dist/appBundle.js和dist/publicBundle.js

gulp.task("js", function(){

    return browserify([
            "./js/app.js",
            "./js/public.js"
        ])
        .bundle()
        .pipe(source("bundle.js"))
        .pipe(gulp.dest("./dist"));

});

很显然，这样做行不通，因为我只指定了一个输出（bundle.js）。我可以通过像这样重复上述语句来实现这一点（但是这样做感觉不太对，因为会有重复的部分）：

gulp.task("js", function(){

    browserify([
            "./js/app.js"
        ])
        .bundle()
        .pipe(source("appBundle.js"))
        .pipe(gulp.dest("./dist"));


    browserify([
            "./js/public.js"
        ])
        .bundle()
        .pipe(source("publicBundle.js"))
        .pipe(gulp.dest("./dist"));

});

有更好的解决方法吗？谢谢！

- Brian FitzGerald

Answer 1

我现在没有一个适合测试的好环境，但我的猜测是它会看起来像这样：

gulp.task("js", function(){
    var destDir = "./dist";

    return browserify([
        "./js/app.js",
        "./js/public.js"
    ])
        .bundle()
        .pipe(source("appBundle.js"))
        .pipe(gulp.dest(destDir))
        .pipe(rename("publicBundle.js"))
        .pipe(gulp.dest(destDir));

});

编辑：我刚刚意识到我错误地阅读了问题，应该有两个来自两个不同.js文件的单独捆绑包。基于此，我能想到的最佳替代方案如下：

gulp.task("js", function(){
    var destDir = "./dist";

    var bundleThis = function(srcArray) {
        _.each(srcArray, function(source) {
            var bundle = browserify(["./js/" + source + ".js"]).bundle();
            bundle.pipe(source(source + "Bundle.js"))
                  .pipe(gulp.dest(destDir));
        });
    };

    bundleThis(["app", "public"]);
});

- urban_raccoons

---

谢谢您的回复！不过我认为在您的例子中，public.js文件并没有被引入和“browserified”，除非我漏看了什么。 - Brian FitzGerald

啊 - 我想我最初误读了你的问题。让我看看能否提供更好的替代方案... - urban_raccoons

谢谢！有时候我会忘记它只是JS（当我深入Node世界时）。我会试一试。 - Brian FitzGerald

是的，我也有同样的问题 - 我会被框架和其他人的代码示例所困扰。这并没有帮助，因为现在很多事情似乎都是自动完成的。 - urban_raccoons

我也在使用 babelify，但是我一直收到错误信息：Did you forget to signal async completion? - Robin Hood

Answer 2

gulp.task("js", function (done) {
  [
    "app",
    "public",
  ].forEach(function (entry, i, entries) {
    // Count remaining bundling operations to track
    // when to call done(). Could alternatively use
    // merge-stream and return its output.
    entries.remaining = entries.remaining || entries.length;

    browserify('./js/' + entry + '.js')
      .bundle()
      // If you need to use gulp plugins after bundling then you can
      // pipe to vinyl-source-stream then gulp.dest() here instead
      .pipe(
        require('fs').createWriteStream('./dist/' + entry + 'Bundle.js')
        .on('finish', function () {
          if (! --entries.remaining) done();
        })
      );
  });
});

这与 @urban_racoons 的答案类似，但有一些改进：

• 如果在 gulp 3 中要将任务作为另一个任务的依赖项或在 gulp 4 中作为系列的一部分，则该答案将失败。该答案使用回调来标志任务完成。
• JS 可以更简单，不需要 underscore。

该答案基于已知每个包的入口文件列表，而不是需要全局输入一个入口文件列表。

- JMM

Answer 3

共享依赖的多个捆绑包

我最近为https://github.com/greypants/gulp-starter添加了支持多个捆绑包与共享依赖。

这是我传递给browserify任务的一系列配置对象数组。在该任务结束时，我会遍历每个配置，将所有东西都进行浏览器化。

config.bundleConfigs.forEach(browserifyThis);

browserifyThis接受一个bundleConfig对象，并运行browserify（如果是开发模式，则使用watchify）。

这是解决共享依赖项的部分：

// Sort out shared dependencies.
// b.require exposes modules externally
if(bundleConfig.require) b.require(bundleConfig.require)
// b.external excludes modules from the bundle, and expects
// they'll be available externally
if(bundleConfig.external) b.external(bundleConfig.external)

这个browserify任务还会在所有捆绑完成时报告情况（上面的示例没有返回流或触发任务的回调），并且在devMode下使用watchify进行超快速重新编译。布赖恩·菲茨杰拉德（Brian FitzGerald）的最后一条评论非常准确。记住，它只是JavaScript！

- Dan Tello

---

我注意到你的仓库已经转移到Webpack上了 - 目前你会建议使用Webpack而不是尝试让多个捆绑包与Browserify一起工作吗？我正在尝试解决一个问题：http://stackoverflow.com/questions/32726088/how-do-i-properly-separate-my-app-js-and-vendor-js-bundles-using-browserify - YPCrumble