Javascript 如何使用gulp uglify缩小ES6功能？

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

不幸的是，按照现在的情况，您不能将

uglify

与

es next

code一起使用， 你可以：

使用Babel传输到

ES5

使用而不是丑陋

你可以这样利用

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

---

需要注意的可能很重要——正如评论中指出的那样——核心巴别塔编译器作为一个插件提供。如果核心库没有通过回购协议中的另一个dep拉下来，请确保在您的终端上安装了该dep

查看作者指定的（7.x）中的

gulpbabel

。不过，稍微老一点的（6.x）也可以。我猜作者（两个项目都是同一个人）正在重新组织模块命名。无论哪种方式，两个npm安装端点都指向，因此您可以使用以下任一项

npm install babel-core --save-dev

或

---

实际上，您可以在不进行透明的情况下丑化ES6代码。使用

gulpuglifyes

plugin代替

gulpuglify

plugin

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

---

公认的答案并没有真正回答如何缩小es6。如果您想在不传输的情况下缩小es6，gulp uglify v3.0.0可以：

2019年3月更新

使用我的原始答案，您肯定想用替换uglify es包，因为似乎uglify es不再被维护

原始答案仍然有效：

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

1.）首先，如果您正在使用纱线并希望更新至最新版本，请将gulp uglify软件包升级至>3.0.0：

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

---

欲了解更多信息：

大口大口大口大口喝：

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

适用于

ES6

及更新版本。

安装：

npm安装——保存开发人员的口吃

安装：

npm安装——保存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'))
});

---

使用而不是狼吞虎咽帮助我完美地完成了与您要求的相同的任务

在开始工作之前，我为此工作了一段时间。正如其他答案所述，问题在于gulp uglify不支持ES6。然而，如果不再维持，吞食丑陋的食物是可以的。其他人推荐Terser，但它不能很好地与gulp配合使用，也不能与

pipe（）

配合使用

如果你像我一样使用gulp-uglify，你的

gulpfile.js

看起来像：

var uglify = require('gulp-uglify');
const html2js = () => {
     var source = gulp.src(config.appFiles.templates);
    return source
        .pipe(concat('templates-app.js'))
        .pipe(uglify())
        .pipe(gulp.dest(config.buildDir));
};

但是，您可以使用gulp-terser软件包，该软件包很容易更换并获得相同的功能：

var terser = require('gulp-terser');
const html2js = () => {
     var source = gulp.src(config.appFiles.templates);
    return source
        .pipe(concat('templates-app.js'))
        .pipe(terser())
        .pipe(gulp.dest(config.buildDir));
};

---

webpack可以完成这项工作

使用transpiler，例如。如果将文件传输到

ES5

适合，请编辑您的问题，因为没有提到这一点，可能会让新用户感到困惑。最近的解决方案是在这里使用您可能还需要安装babel core，要执行此操作，请运行npm安装--保存dev babel-core@rhysclay谢谢你指出这一点！事实上，我从来没有注意到这种情况可能会发生——我以为它只是随波逐流。我研究了一下正在发生的事情，发现了一些有趣的信息。如果你想查看我的发现，我已经编辑了我的答案。这对我不起作用。最近的解决方案是如何将javascript作为字符串传递？这可能吗？最终对我有效的是升级整个gulp-*堆栈（除了改变API的gulp useref）。基本上，从package.js中删除了所有gulp-*依赖项，并从头开始安装。这会破坏IE11的js吗？@TaylorA.Leach是的，IE11已经有2年多没有得到支持了。如果你想支持IE11，你不能使用ES6的（大部分功能）。这是不是遗漏了一个步骤？我得到“错误：找不到模块'uglify es'”。谷歌搜索，我也看到“uglify es”已经被放弃了…@PhilGyford是的，因为你的错误消息表明你需要安装uglify es软件包<代码>纱线添加丑陋es应该可以做到这一点。看起来uglify es很快就要被弃用了，所以我会在有机会的时候用一个新的软件包来更新它，但是uglify es仍然每周下载240万次，所以可能需要很长一段时间才能让每个人都转到更简洁的版本，非常感谢。我花了数小时试图安装和使用babel-与该产品终端es6不兼容的组合数量令人难以置信-babel是我在gulp中遇到的最大垃圾负载-其他一切都在gulp中工作-但babel只不过是一场不兼容的噩梦。@johnblair-我已经成功使用它超过一年了一年。我建议重新调查。它可以节省大量的时间。我也有一个相当复杂的设置，它简化了很多事情。