web-dev-qa-db-fra.com

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

Un petit projet que j'ai commencé utilise un module de noeud (installé via npm) qui déclare des variables const. Exécuter et tester ce projet est bien, mais browserify échoue lors de l'exécution de UglifyJS.

Jeton inattendu: mot clé (const)

Voici un fichier Gulp générique que j’ai utilisé avec succès pour quelques projets antérieurs sans ce problème (c’est-à-dire sans ce module de noeud 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 toutes les variables const par var dans ce module installé par npm, et tout va bien. Donc je ne comprends pas l'échec.

Quel est le problème avec const? À moins que quelqu'un utilise IE10, tous grands 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 noeud?

Mettre à jour

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

javascriptnpmgulpbabeljsuglifyjs2
24
Yanick Rochon

Mise à jour de novembre 2018:

Utilisez terser-webpack-plugin pour ES6 (webpack @ 5 utilisera ce plugin pour la modification)

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

Puis définissez dans votre tableau plugins

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

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

La source

21
Ser

UglifyJS ne supporte pas es6. const est une déclaration es6 et génère donc une erreur.

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

Si vous souhaitez toujours utiliser UglifyJS (pour réutiliser la configuration par exemple), utilisez la version compatible ES6 +, uglify-es . (Warning: uglify-es est maintenant abandonné .) 

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

16
ChrisR

Utiliser uglify-es-webpack-plugin, c'est mieux

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



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