Как использовать gulp-traceur и gulp-webpack?

Question

Я пытаюсь скомпилировать файлы ES6 js. Я использую gulp-traceur и gulp-wepback в линии gulp pipe.

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

Когда работает глоток. Я принимаю ошибку: неожиданное зарезервированное слово. Вам может понадобиться соответствующий загрузчик для обработки этого типа файлов. На строке, содержащей слово "класс". (Синтаксис ES6)

Я не могу понять, как использовать эти плагины вместе?

Answer 1

Эта установка прошла бы 'js/app.js' проследить, но ни один из связанных файлов, и веб-пакет затем запустится из этого переданного файла и обработает все остальное как обычный JS. Я на самом деле даже не уверен, что веб-пакет получит прозрачную версию app.js,

Надлежащим способом является использование веб-пакета в качестве главной точки входа и указание веб-пакету передать все файлы, с которыми он сталкивается. Я также рекомендовал бы использовать логику 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'));
});