如何使用 browserify 和 gulp 输出多个包

Posted 2023-03-07

【中文标题】如何使用 browserify 和 gulp 输出多个包

【英文标题】：how to output multiple bundles with browserify and gulp

【发布时间】：2014-07-13 04:58:08

【问题描述】：

我有 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"));

);

有没有更好的方法来解决这个问题？谢谢！

【参考方案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"]);
);

【讨论】：

感谢您的回复！我认为在您的示例中，除非我遗漏了什么，否则 public.js 文件永远不会被拉入和“浏览”。

啊 - 我想我最初误读了你的问题。让我看看我能不能想出一个更好的选择......

谢谢！有时我忘记了它只是 js（当我潜入节点世界时）。我试试看

是的，同样的事情也发生在我身上——我非常沉迷于框架和其他人的代码示例。这些天似乎自动发生了这么多事情并没有帮助

我也在使用babelify...我不断收到错误消息：Did you forget to signal async completion?

【参考方案2】：

具有共享依赖关系的多个捆绑包

我最近向https://github.com/greypants/gulp-starter添加了对具有共享依赖项的多个捆绑包的支持

这是我传递给我的browserify task 的 browserify config objects 数组。在该任务结束时，我会遍历每个配置，浏览所有内容。

config.bundleConfigs.forEach(browserifyThis);

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

这是sorts out shared dependencies：

// 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 任务也正确地reports when all bundles are finished（上面的例子没有返回流或触发任务的回调），并且uses watchify 在 devMode 下用于超快速重新编译。

Brian FitzGerald 的最后一条评论很到位。请记住，它只是 javascript！

【讨论】：

我注意到您的 repo 已移至 Webpack - 此时您是否建议朝这个方向发展，而不是尝试让多个捆绑包与 Browserify 一起使用？试图弄清楚***.com/questions/32726088/…

【参考方案3】：

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 可以更简单，不需要下划线。

这个答案的前提是每个包都有一个已知的入口文件列表，而不是说，需要一个入口文件列表。