Comment minifier les fonctions ES6 avec gulp-uglify?

Quand je lance gulp j'obtiens l'erreur suivante:

[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 }

La ligne fautive contient une flèche fonction:

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

Je sais que je peux le remplacer par le texte suivant pour remédier à la minification erreur:

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

Comment puis-je exécuter gulp sur le code contenant ES6 fonctionnalités sans causer de minification à l'échec?

source d'informationauteur Don Peat

24

Vous pouvez tirer parti de gulp-babel en tant que tel...
```
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())
    //[...]
});
```
Ce sera transpile votre es6 tôt dans le pipeline et le taux de désabonnement comme largement pris en charge "claire" javascript par le temps que vous rapetisser.

Peut être important de noter - comme l'a souligné dans les commentaires - le cœur de babel compilateur fourni comme un par les pairs de la dépendance dans ce plugin. Dans le cas où la base de la lib n'est pas tiré vers le bas par un autre dep dans votre pension, s'assurer que c'est installé sur votre fin.

À la recherche à la par les pairs de la dépendance dans gulp-babel l'auteur est de spécifier @babel/core (7.x). Cependant, le plus légèrement babel-core (6.x) fonctionnera aussi bien. Ma conjecture est que l'auteur (qui est la même pour les deux projets) est en plein coeur de la réorganisation de leur module de nommage. De toute façon, les deux mnp installation de points de terminaison du point de https://github.com/babel/babel/tree/master/packages/babel-corede sorte que vous serez très bien avec l'une des opérations suivantes...
```
npm install babel-core --save-dev
```
ou
```
npm install @babel/core --save-dev
```
15

Accepté la réponse n'est pas vraiment répondre à comment minifier les droites es6. Si vous voulez rapetisser l'es6 sans transpiling, gulp-uglify v3.0.0, c'est possible:

1.) Tout d'abord, la mise à niveau de votre gulp-uglify paquet > 3.0.0 Si vous êtes à l'aide de fil et souhaitez mettre à jour vers la dernière version:
```
yarn upgrade gulp-uglify --latest
```
2.) Maintenant, vous pouvez utiliser uglify-es, le "es6 version" de uglify, de la manière suivante:
```
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'))
});
```
Pour plus d'info: https://www.npmjs.com/package/gulp-uglify

Vous pouvez uglify ES6 code sans transpilation. Au lieu de gulp-uglify plugin, utilisez gulp-uglifyes 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'));
});

1

malheureusement, comme par maintenant, vous ne pouvez pas utiliser uglify avec es-next code
vous pouvez:
1. Transpile à ES5à l'aide de Babel
2. Utilisation Babili au lieu de Uglify.

Vous devez vous connecter pour publier un commentaire.