web-dev-qa-db-fra.com

Comment minimiser les fonctions de ES6 avec gulp-uglify?

Lorsque je lance gulp, j'obtiens le message d'erreur suivant:

[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 incriminée contient une fonction de flèche:

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

Je sais que je peux le remplacer par ce qui suit pour remédier à l'erreur de minification:

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

Comment puis-je exécuter gulp sur du code contenant des fonctionnalités ES6 sans provoquer l'échec de minification?

javascriptnode.jsecmascript-6gulpgulp-uglify
36
Don P

Vous pouvez utiliser 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())
    // [...]
});

Cela va transpiler votre es6 tôt dans le pipeline et devenir un javascript "simple" largement pris en charge au moment où vous réduisez.

Il peut être important de noter - comme indiqué dans les commentaires - le compilateur babel principal est expédié sous la forme d'un dépendance des pairs dans ce plugin. Au cas où la bibliothèque principale ne serait pas extraite via un autre dépôt dans votre référentiel, assurez-vous que cela est installé de votre côté.

En regardant dépendance des pairs dans gulp-babel l'auteur spécifie @ babel/core (7.x). Cependant, le légèrement plus vieux babel-core (6.x) fonctionnera également. Je suppose que l'auteur (qui est identique pour les deux projets) est en train de réorganiser la dénomination de leurs modules. Dans les deux cas, les deux points de terminaison de l'installation npm pointent vers https://github.com/babel/babel/tree/master/packages/babel-core , vous pourrez donc utiliser l'un des éléments suivants. ..

npm install babel-core --save-dev

ou

npm install @babel/core --save-dev
33
scniro

La réponse acceptée ne signifie pas vraiment comment minifier directement es6. Si vous voulez réduire es6 sans transpiler, gulp-uglify v3.0.0 rend cela possible:

Mise à jour de mars 2019

En utilisant ma réponse initiale, vous voudrez peut-être remplacer le paquet uglify-es par terser , car il semble que uglify-es ne soit plus maintenu.

La réponse originale fonctionne toujours:

1.) Commencez par mettre à jour votre paquet gulp-uglify vers la version 3.0.0. Si vous utilisez du fil et souhaitez mettre à jour votre logiciel à la dernière version:

yarn upgrade gulp-uglify --latest

2.) Vous pouvez maintenant utiliser uglify-es, la "version es6" de uglify, comme suit:

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'informations: https://www.npmjs.com/package/gulp-uglify

34
KayakinKoder

En réalité, vous pouvez modifier le code ES6 sans transpilation. Au lieu de gulp-uglify plugin, utilisez gulp-uglifyes brancher.

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'));
});
19
Vladimir Jovanović

gulp-uglify:

Pour ES6 et plus récent.

  1. installer: npm install --save-dev gulp-uglify
  2. installer: npm install --save-dev gulp-babel @babel/core @babel/preset-env

tilisation:

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

malheureusement, comme maintenant, vous ne pouvez pas utiliser uglify avec es-next code , vous pouvez:

  1. Transmettre en ES5using Babel
  2. Utilisez Babili au lieu de Uglify.
1
Hitmands