一尘不染

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

node.js

当我运行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功能的代码?


阅读 268

收藏
2020-07-07

共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
2020-07-07