使用browserfy和gump运行多个转换

Running multiple transforms using browserify with gulp

本文关键字：转换 运行 gump browserfy 使用      更新时间：2023-09-26

我使用browsrify和gull将javascript代码捆绑在我的web应用程序中，并使用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'))
});

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

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

有没有一种方法可以使用gump进行多次转换？

如果（是）｛

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

}

其他｛

如果我指定了shim转换到package.json中，但我将babelify转换保留到gulpfile中，那么当browserfy生成最终的bundle时会有问题吗？两个转换都会执行吗？

}

谢谢！！

我猜你的设置很好，但如果所有转换都在同一个地方，会更清楚、更容易理解发生了什么。我会把它们放在你的gulpfile中，让你的babelify转换在你浏览的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
相关文章：