javascript - 如何使用 gulp-traceur 和 gulp-webpack？

Question

我正在尝试编译 ES6 js 文件。我在 gulp 管道中使用 gulp-traceur 和 gulp-wepback。

gulp.task('default', function () {
return gulp.src('js/app.js')
    .pipe(traceur())
        .pipe(webpack())
        .pipe(concat('app.js'))
            .pipe(rename({suffix: '.min'}))
            .pipe(uglify())
        .pipe(gulp.dest('build/js'));

运行 gulp 时。我接受错误：意外的保留字。您可能需要适当的加载程序来处理此文件类型。在其中包含一个“类”字的行。（ES6 语法）

我不知道如何一起使用这些插件？

Answer 1

This setup would pass 'js/app.js' to traceur, but none of the related files, and webpack will then start from that transpiled file and process the rest as normal JS. I'm actually not even sure webpack will get the transpile version of app.js.

The proper way is to use webpack for the main entry point, and tell webpack to transpile all files it comes across. I'd also recommend using Webpack's uglifyjs logic instead of tacking it on after-the-fact with gulp.

gulp.task('default', function () {
    return gulp.src('js/app.js')
        .pipe(webpack({
            module: {
                loaders: [{
                    test: /^(?!.*(bower_components|node_modules))+.+\.js$/,
                    loader: 'traceur'
                }]
            },
            plugins: [
                new webpack.optimize.UglifyJsPlugin()
            ]
        })
        .pipe(concat('app.js'))
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('build/js'));
});