如何用gulp-uglify缩小ES6功能？

Question

当我运行gulp时，出现以下错误：

[12:54:14] { [GulpUglifyError: unable to minify JavaScript]
cause:
{ [SyntaxError: Unexpected token: operator (>)]
 message: 'Unexpected token: operator (>)',
 filename: 'bundle.js',
 line: 3284,
 col: 46,
 pos: 126739 },
plugin: 'gulp-uglify',
fileName: 'C:\\servers\\vagrant\\workspace\\awesome\\web\\tool\\bundle.js',
showStack: false }

令人反感的行包含箭头功能：

let zeroCount = numberArray.filter(v => v === 0).length

我知道我可以用以下替换它，以通过放弃ES6语法来纠正缩小错误：

let zeroCount = numberArray.filter(function(v) {return v === 0;}).length

如何通过gulp压缩包含ES6功能的代码？

Answer 1

您可以像这样利用npmjs …

const gulp = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');

gulp.task('minify', () => {
  return gulp.src('src/**/*.js')
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(uglify())
    // [...]
});

这将在管道中尽早移植es6，并在缩小时将其作为广泛支持的“纯” javascript。

*正如 *注释中 所指出的那样， 可能需要注意的重要一点
是，核心babel编译器在此插件中作为对等依赖项提供。如果没有通过仓库中的另一个dep下拉核心库，请确保已将其安装在您的终端上。

综观对等体依赖性在gulp- babel作者是指定@巴贝尔/芯（7.x中）。不过，稍早的babel-core（6.x）也可以使用。我的猜测是作者（两个项目的人都一样）正处于重新组织其模块命名的过程中。无论哪种方式，两个npm安装端点都指向https://github.com/babel/babel/tree/master/packages/babel-
core
，因此您可以使用以下任意一个…

npm install babel-core --save-dev

要么

npm install @babel/core --save-dev