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

90

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.

Yanick Rochon
la source
N'est-ce pas un problème avec la version du nœud? N'avez-vous pas besoin du nœud 8+ pour être constdisponible? (je ne sais pas quand il a été introduit)
laurent
J'utilise constdepuis la v4. Et j'utilise actuellement 8.9.1 LTS.
Yanick Rochon
Ok c'est étrange alors. Quel est le message d'erreur que vous voyez?
laurent
@ this.lau_ le même message d'erreur que dans le titre, mais je l'ai ajouté dans la question également pour plus de clarté.
Yanick Rochon
Il ne doit pas nécessairement s'agir du «const». Cela pourrait être l'un des modules dont vous avez besoin.
James

Réponses:

92

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

Ser
la source
1
Vous devriez peut-être suggérer npm install --save-dev terser-webpack-plugin.
Rafa
2
J'apprécie vraiment cette réponse car elle m'a rappelé la terserbibliothèque qui terser-webpack-pluginutilise en dessous. Note pour les autres: terserpeut être utilisé seul en tant que cli tel uglify-jsquel (c'est-à-dire que webpack n'est pas une exigence), ce qui était exactement ce dont j'avais besoin.
John Lee
1
mais nous devons utiliser webpack pour utiliser cette solution?
Enrique
@enrique dépend de ce que vous voulez faire, pour créer un site Web qui correspond aux besoins réels de l'entreprise, vous devez absolument essayer Webpack. Nous avons eu ce problème sur la communauté Webpack, donc ma réponse est bien notée, mais techniquement, vous n'avez pas besoin de webpack pour créer le code ES6
Ser
Terser a été sélectionné pour le webpack @ 4 sur github.com/webpack/webpack/pull/8392
Trivikram
39

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.

ChrisR
la source
3
Vous pouvez également remplacer gulp-uglifypar gulp-uglify-es: npmjs.com/package/gulp-uglify-es
ChrisR
3
UglifyJS does not support es6 . Merci! Je n'ai pu trouver cette information nulle part.
Karl Pokus
à utiliser gulp-tersersi la migration vers Webpack ne dépasse pas votre budget.
Riki137
7

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!

Christiyan
la source
testé et fonctionnant avec "node: v12.14", "gulp cli v2.2.1", "gulp local v4.0.2".
ioojimooi
2

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.

NetOperator Wibby
la source
0

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

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



    module.exports = {
    plugins: [
            new UglifyEsPlugin({
                compress:{
                    drop_console: true
                }
            }),
    ] 
    }
NEO VISION
la source
7
Ceci est une opinion, veuillez expliquer pourquoi c'est mieux.
ChrisR
0

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

Sjoerd
la source
0

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!

Gh111
la source