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

【问题标题】：How to use gulp-traceur and gulp-webpack?如何使用 gulp-traceur 和 gulp-webpack？
【发布时间】：2015-02-04 04:24:37
【问题描述】：

我正在尝试编译 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 语法）

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

【问题讨论】：

标签： javascript gulp ecmascript-6 traceur

【解决方案1】：

此设置会将'js/app.js' 传递给traceur，但没有任何相关文件，然后webpack 将从该转译文件开始，并将其余部分作为普通JS 处理。实际上，我什至不确定 webpack 是否会获得 app.js 的转译版本。

正确的方法是使用 webpack 作为主入口点，并告诉 webpack 转译它遇到的所有文件。我还建议使用 Webpack 的 uglifyjs 逻辑，而不是在事后使用 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'));
});

【讨论】：