如何解决 Gulp 上的这个缩小错误？

Question

运行此命令时遇到错误

gulp.task('minify', function () {
    return gulp
      .src('public/app/js/myapp.bundle.js')
      .pipe(uglify())
      .pipe(gulp.dest('public/app/js/myapp.bundle.min.js'));
});

GulpUglifyError: 无法缩小 JavaScript 原因：SyntaxError: Unexpected token: name (MenuItem) (line: 1628, col: 18, pos: 53569)

该位置的代码是这样的

 setters: [],
 execute: function () {
     class MenuItem {  // <-- line 1628

怎么了？

Answer 1

UglifyJS does not currently support EcmaScript 6 结构 like classes.

您可能需要首先通过转译器步骤运行您的 JavaScript，或者找到一个知道如何处理 ES6 代码的压缩程序。

2017-06-17 更新

设计用于 ES6 的 UglifyJS 分支现已在 npm 上发布为 uglify-es。

2018 年 9 月 10 日更新

terser 是新的uglify-es、uglify-es is no longer maintained。

如果使用gulp，npmjs gulp-uglify-es 和 npmjs gulp-terser 包都支持 terser。

npm install gulp-terser --save-dev

const gulp = require('gulp');
const terser = require('gulp-terser');
 
function es(){
  return gulp.src('./src/index.js')
    .pipe(terser())
    .pipe(gulp.dest('./build'))
}

gulp.task('default', es);

Answer 2

如果你遇到这个问题，并且你有事实上有一个像 Babel 这样的转译器步骤，请确保你在 .babelrc 文件中包含正确的 Babel 预设。否则 Babel 只会让你的代码保持原样。

例如

{
  "presets": ["es2015"]
}