javascript 如何使用 browserify 和 gulp 输出多个包
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23835898/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to output multiple bundles with browserify and gulp
提问by Brian FitzGerald
I have browserify bundling up files and it's working great. But what if I need to generate multiple bundles?
我有 browserify 捆绑文件，它工作得很好。但是如果我需要生成多个包怎么办？
I would like to end up with dist/appBundle.jsand dist/publicBundle.js
我想结束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"));
});
Obviously this isn't going to work since I am only specifying one output (bundle.js). I can accomplish this by repeating the above statement like so (but it doesn't feel right, because of the repetition):
显然这不会起作用，因为我只指定了一个输出 (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"));
});
Is there a better way to tackle this? Thanks!
有没有更好的方法来解决这个问题？谢谢！
采纳答案by urban_raccoons
I don't have a good environment to test this in right now, but my guess is that it would look something like:
我现在没有一个很好的环境来测试这个，但我猜它看起来像：
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));
});
EDIT: I just realized I mis-read the question, there should be two separate bundles coming from two separate .js files. In light of that, the best alternative I can think of looks like:
编辑：我刚刚意识到我误读了这个问题，应该有来自两个单独的 .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"]);
});
回答by Dan Tello
Multiple bundles with shared dependencies
具有共享依赖项的多个捆绑包
I recently added support for multiple bundles with shared dependencies to https://github.com/greypants/gulp-starter
我最近向https://github.com/greypants/gulp-starter添加了对具有共享依赖项的多个包的支持
Here's the array of browserify config objectsI pass to my browserify task. At the end of that task, I iterate over each config, browserifying all the things.
这是我传递给我的browserify 任务的 browserify配置对象数组。在该任务结束时，我遍历每个配置，浏览所有内容。
config.bundleConfigs.forEach(browserifyThis);
browserifyThistakes a bundleConfig object, and runs browserify (with watchify if dev mode).
browserifyThis接受一个 bundleConfig 对象，并运行 browserify（如果开发模式使用 watchify）。
This is the bit that 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)
This browserify task also properly reports when all bundles are finished(the above example isn't returning streams or firing the task's callback), and uses watchifywhen in devMode for super fast recompiles.
这个 browserify 任务也正确地报告所有包何时完成（上面的例子没有返回流或触发任务的回调），并在 devMode 下使用watchify 进行超快速重新编译。
Brian FitzGerald's last comment is spot on. Remember that it's just JavaScript!
布赖恩·菲茨杰拉德 (Brian FitzGerald) 的最后一条评论恰到好处。请记住，它只是 JavaScript！
回答by JMM
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();
})
);
});
});
This is similar to @urban_racoons answer, but with some improvements:
这类似于@urban_racoons 的回答，但有一些改进：
- That answer will fail as soon as you want the task to be a dependency of another task in gulp 3, or part of a series in gulp 4. This answer uses a callback to signal task completion.
- The JS can be simpler and doesn't require underscore.
- 只要您希望该任务成为 gulp 3 中另一个任务的依赖项，或 gulp 4 中一系列任务的一部分，该答案就会失败。此答案使用回调来表示任务完成。
- JS 可以更简单，不需要下划线。
This answer is based on the premise of having a known list of entry files for each bundle, as opposed to, say, needing to glob a list of entry files.
这个答案是基于每个包都有一个已知的入口文件列表的前提，而不是，比如说，需要一个入口文件列表。
