如何使用gull-traceur和gull-webpack

Question

我正在尝试编译ES6js文件。我在吞咽管路中使用吞咽痕迹和吞咽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'));

跑步时吞咽。我弄错了：意外的保留字。您可能需要一个适当的加载程序来处理此文件类型。在包含"class"单词的行上。（ES6语法）

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

Answer 1

此设置会将'js/app.js'传递给traceur，但不会传递任何相关文件，然后webpack将从该传输文件开始，并将其余文件作为正常JS处理。事实上，我甚至不确定webpack是否会获得app.js的transfile版本。

正确的方法是使用webpack作为主要入口点，并告诉webpack对它遇到的所有文件进行transfile。我还建议使用Webpack的uglifyjs逻辑，而不是在事后用gullow来附加它。

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'));
});