如何使用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

此設置會將'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'));
});