UglifyJS jette un jeton inattendu: mot-clé (const) avec node_modules

Un petit projet que j'ai commencé utilise un module de nœud (installé via npm ) qui déclare des constvariables. L'exécution et le test de ce projet sont bien, mais browserify échoue lorsque UglifyJS est exécuté.

Jeton inattendu: 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 de nœud 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 corriger ceci en remplacer tous constà vardans ce module installé NPM, et tout va bien. Donc je ne comprends pas l'échec.

Quel est le problème avec const? À moins que quelqu'un n'utilise IE10, tous les principaux navigateurs prennent en charge cette syntaxe.

Existe-t-il un moyen de résoudre ce problème sans nécessiter de modification de ce module de nœud?

Mise à jour

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

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

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

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

Puis définissez dans votre pluginstableau

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

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

La source

UglifyJS ne prend pas en charge es6. constest une déclaration es6, elle génère donc une erreur.

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

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

Et comme Ser l'a mentionné , vous devriez maintenant utiliser terser-webpack-plugin.

J'ai eu le même problème et le plugin gulp gulp-uglify-es a résolu le problème.

Je pense que c'est la décision la plus simple.

Installez simplement:

npm i gulp-uglify-es --save-dev

après cela dans votre code ne changez que cette ligne

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

pour ça:

const uglify = require('gulp-uglify-es').default;

NB propriété .default est cruciale sinon vous aurez une erreur indiquant que uglify n'est pas une fonction.

Comme mentionné ci-dessus et comme faisant partie de ES6, l' opérateur const ne peut être traité que par le plugin es6 gulp plus moderne "gulp-uglify-es"

Le reste de votre code n'a pas besoin d'être modifié.

Meilleures salutations!

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

Utilisez uglify-es-webpack-plugin c'est mieux

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



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

J'ai remplacé UglifyJSpar l' YUI Compressor JSintérieur de l'interface graphique de PHPStorm .. Cela fonctionne maintenant.

Je ne pense pas vraiment que cette approche soit bonne, mais dans mon cas, j'avais besoin de le faire une fois et de l'oublier, alors je suis simplement allé sur le site Web de babel , transpile es6 en es5 en ligne et j'ai remplacé la sortie!