UglifyJS rejette un token inattendu : mot-clé (const) avec node_modules

Question

Un petit projet que j'ai commencé à faire utiliser un module node (installé via npm ) qui déclare const variables. L'exécution et le test de ce projet se passe bien, mais browserify échoue lorsque UglifyJS est exécuté.

Unxpected token : mot-clé (const)

Voici un fichier Gulp générique que j'ai utilisé avec succès pour quelques autres projets passés sans ce problème (c'est-à-dire sans ce module node particulier).

gulpfile.js

'use strict';

const browserify = require('browserify');
const gulp = require('gulp');
const source = require('vinyl-source-stream');
const derequire = require('gulp-derequire');
const buffer = require('vinyl-buffer');
const uglify = require('gulp-uglify');
const sourcemaps = require('gulp-sourcemaps');
const gutil = require('gulp-util');
const path = require('path');
const pkg = require('./package');
const upperCamelCase = require('uppercamelcase');

const SRC_PATH = path.dirname(pkg.main);
const DIST_PATH = path.dirname(pkg.browser);

const INPUT_FILE = path.basename(pkg.main);
const OUTPUT_FILE = path.basename(pkg.browser);

const MODULE_NAME = upperCamelCase(pkg.name);

gulp.task('default', () => {
  // set up the browserify instance on a task basis
  var b = browserify({
    entries: INPUT_FILE,
    basedir: SRC_PATH,
    transform: ['babelify'],
    standalone: MODULE_NAME,
    debug: true
  });

  return b.bundle()
    .pipe(source(OUTPUT_FILE))
    .pipe(buffer())
    .pipe(derequire())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(uglify())
    .on('error', gutil.log)
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(DIST_PATH))
  ;
});

J'ai essayé de résoudre ce problème en remplaçant tous les const a var dans ce module installé par npm, et tout va bien. Je ne comprends donc pas l'échec.

Quel est le problème avec const ? Sauf si quelqu'un utilise IE10, todo Les principaux navigateurs prennent en charge cette syntaxe.

Existe-t-il un moyen de résoudre ce problème sans avoir à modifier le module du nœud ?

Mise à jour

J'ai remplacé temporairement (ou définitivement) UglifyJS par Butternut et semblent fonctionner.

Answer 1

Comme ChrisR a mentionné UglifyJS ne supporte pas du tout ES6.

Vous devez utiliser terser-webpack-plugin pour ES6 (webpack@5 utilisera ce plugin pour l'uglification)

npm install terser-webpack-plugin --save-dev

Ensuite, définissez dans votre plugins tableau

const TerserPlugin = require('terser-webpack-plugin')

  new TerserPlugin({
    parallel: true,
    terserOptions: {
      ecma: 6,
    },
  }),

Source :

Answer 2

UglifyJS ne supporte pas es6. const est une déclaration es6, ce qui entraîne une erreur.

Ce qui est bizarre, c'est que le paquet que vous utilisez ne transpile pas ses fichiers en es5 pour être utilisé n'importe où.

Si vous voulez continuer à utiliser UglifyJS (pour réutiliser la configuration par exemple), utilisez la version compatible ES6+, uglify-es . ( Avertissement : uglify-es es maintenant abandonné .)

Et comme Série mentionnée vous devez maintenant utiliser terser-webpack-plugin .

Answer 3

Je viens d'avoir ce problème avec un projet Gulp que j'ai remanié et pour une raison quelconque, j'avais des difficultés avec le plugin Gulp officiel de Terser. Celui-là (gulp-terser) a fonctionné sans problème.

Answer 4

J'ai remplacé UglifyJS con YUI Compressor JS dans le GUI de PHPStorm Cela fonctionne maintenant.

Answer 5

Utiliser uglify-es-webpack-plugin est mieux

    const UglifyEsPlugin = require('uglify-es-webpack-plugin')

    module.exports = {
    plugins: [
            new UglifyEsPlugin({
                compress:{
                    drop_console: true
                }
            }),
    ] 
    }