运行使用 browserify 和 gulp 进行多次转换

Question

我正在使用 browserify 和 gulp 将 javascript 代码捆绑到我的网络应用程序中，我正在使用 babelify 将代码转换为 es6 兼容，如下所示。

gulp.task('js',function(){
var bundleStream = browserify(config.paths.mainJs)
    .transform("babelify", {presets: ["es2015", "react"]})
    .bundle()
    .on('error',console.error.bind(console))

bundleStream
    .pipe(source('compiled.js'))
    .pipe(buffer())
    .pipe(uglify())
    .pipe(rename('compiled.min.js'))
    .pipe(gulp.dest(config.paths.dist + '/js'))
});

现在，我意识到我需要使用 browserify-shim，根据文档，使用它的方法是在 package.json 中包含以下 json:

{ 
    "browserify": {
    "transform": [ "browserify-shim" ]
    }
}

有没有办法使用 gulp 进行多重转换？

如果（是）{

正确的语法是什么？在这种情况下，它们的指定顺序对创建最终包是否重要？

}

否则{

如果我指定然后将 shim 转换为 package.json，但我将 babelify 转换为 gulp 文件，当 browserify 生成最终包时会有问题吗？两个转换都会执行吗？

}

谢谢！！

Answer 1

我猜你的设置没问题，但如果你所有的转换都在同一个地方，它会更清楚、更容易理解发生了什么。我会把它们放在你的 gulpfile 中，并让你的 babelify 转换出现在你的 browserify-shim 转换之前：

var browserifyShim = require('browserify-shim'); // <--require statement at top
// gulp.task...........
var bundleStream = browserify(config.paths.mainJs)
    .transform("babelify", {presets: ["es2015", "react"]})
    .transform(browserifyShim) // <-- put your browserify-shim transform here.
    .bundle()
    .on('error',console.error.bind(console))
// Rest of gulpfile

运行 使用 browserify 和 gulp 进行多次转换

Running multiple transforms using browserify with gulp

javascript

json

gulp

browserify

browserify-shim

运行使用 browserify 和 gulp 进行多次转换