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

Question

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

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' в traceur, но ни один из связанных файлов, и веб-пакет не начнет с этого файла с пересылкой и обработает остальные как обычные JS. На самом деле я даже не уверен, что веб-пакет получит версию для пересылки app.js.

Правильный способ - использовать webpack для основной точки входа и сообщить webpack, чтобы передать все файлы, с которыми он сталкивается. Я бы также рекомендовал использовать uglifyjs логику Webpack вместо того, чтобы приклеивать ее после галфа.

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