如何使用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 }

违规行包含箭头功能：

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

我知道我可以用以下内容替换它来弥补缩小错误：

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

如何在包含ES6功能的代码上运行gulp而不会导致缩小失败？

Answer 1

你可以利用gulp-babel ......

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

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

这将在您的管道中提前转换您的es6，并在您缩小时作为广泛支持的“普通”JavaScript生成。

---

值得注意的是 - 正如评论中指出的那样 - 核心babel编译器在此插件中作为peer dependency发布。如果没有通过您的仓库中的另一个dep下拉核心库，请确保在您的末端安装了该库。

在peer dependency中查看gulp-babel，作者正在指定@babel/core（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

Answer 2

接受的答案并没有真正回答如何缩小直接es6。如果你想在没有转换的情况下缩小es6，gulp-uglify v3.0.0可以实现：

2019年3月更新

使用我的原始答案，你可能想用terser替换uglify-es包，因为似乎不再维护uglify-es。

原始答案，仍然有效：

1.）首先，将gulp-uglify软件包升级到> 3.0.0如果您正在使用yarn并想要更新到最新版本：

yarn upgrade gulp-uglify --latest

2.）现在你可以使用uglify-es，uglify的“es6版本”，如下所示：

const uglifyes = require('uglify-es');
const composer = require('gulp-uglify/composer');
const uglify = composer(uglifyes, console);

gulp.task('compress', function () {
    return gulp.src('src/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist'))
});

欲了解更多信息：https://www.npmjs.com/package/gulp-uglify

Answer 3

实际上，您可以在不进行转换的情况下使用ES6代码。而不是gulp-uglify插件，使用gulp-uglifyes插件。

var gulp = require('gulp');
var rename = require('gulp-rename'); 
var uglify = require('gulp-uglifyes');
var plumber = require('gulp-plumber');
var plumberNotifier = require('gulp-plumber-notifier');
var sourcemaps = require('gulp-sourcemaps');
var runSequence = require('run-sequence').use(gulp);

gulp.task('minjs', function () {
  return gulp.src(['/dist/**/*.js', '!/dist/**/*.min.js'])
    .pipe(plumberNotifier())
    .pipe(sourcemaps.init())
    .pipe(uglify({ 
       mangle: false, 
       ecma: 6 
    }))
    .pipe(rename(function (path) {
      path.extname = '.min.js';
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('/dist'));
});

Answer 4

吞掉，丑化：

对于ES6和更新。

1. 安装：npm install --save-dev gulp-uglify
2. 安装：npm install --save-dev gulp-babel @babel/core @babel/preset-env

用法：

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

gulp.task('script', () => {
    return gulp.src('src/**/*.js')
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('src/dist'))
});

Answer 5

不幸的是，按照现在，你不能使用uglify与es-next代码，你可以：

1. 透明到ES5using Babel
2. 使用Babili而不是Uglify。