UglifyJS lancia un token imprevisto: parola chiave (const) con node_modules

Un piccolo progetto che ho iniziato utilizza un modulo nodo (installato tramite npm ) che dichiara le constvariabili. L'esecuzione e il test di questo progetto va bene, ma browserify fallisce quando viene eseguito UglifyJS.

Token imprevisto: parola chiave (const)

Ecco un file Gulp generico che ho utilizzato con successo per alcuni altri progetti passati senza questo problema (cioè senza quel particolare modulo nodo).

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))
  ;
});

Ho cercato fissare questo da sostituire tutto consta varin quel modulo NPM-installato, e tutto va bene. Quindi non capisco il fallimento.

Cosa c'è che non va const? A meno che qualcuno non utilizzi IE10, tutti i principali browser supportano questa sintassi.

C'è un modo per risolvere questo problema senza richiedere una modifica a quel modulo del nodo?

Aggiornare

Ho temporaneamente (o permanentemente) sostituito UglifyJS con Butternut e sembra funzionare.

Come accennato da ChrisR , UglifyJS non supporta affatto ES6.

Devi usare terser-webpack-plugin per ES6 (webpack @ 5 userà questo plugin per l'amplificazione)

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

Quindi definisci nel tuo pluginsarray

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

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

fonte

UglifyJS non supporta es6. constè una dichiarazione es6, quindi genera un errore.

Ciò che è strano è che il pacchetto che usi non trasferisce i suoi file in es5 per essere usati ovunque.

Se vuoi ancora usare UglifyJS (per riutilizzare la configurazione per esempio) usa la versione compatibile con ES6 +, uglify-es . ( Attenzione : orauglify-es è abbandonato .)

E come ha detto Ser , ora dovresti usare terser-webpack-plugin.

Ho avuto lo stesso problema e il plug -in gulp gulp-uglify-es ha risolto il problema.

Penso che sia la decisione più semplice.

Basta installare:

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

dopodiché nel codice cambia solo questa riga

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

a questa:

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

NB proprietà .default è fondamentale altrimenti avrai un errore che uglify non è una funzione.

Come accennato in precedenza e in quanto parte dell'operatore const ES6 può essere elaborato solo dal più moderno plug-in gulp es6 "gulp-uglify-es"

Il resto del codice non deve essere modificato.

I migliori saluti!

Ho appena avuto questo problema con un progetto Gulp che ho refactoring e per qualche motivo ho avuto problemi con il plug-in Terser Gulp ufficiale. Questo (gulp-terser) ha funzionato senza problemi.

Usa uglify-es-webpack-plugin è meglio

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



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

L'ho sostituito UglifyJScon YUI Compressor JSall'interno della GUI di PHPStorm .. Ora funziona.

Non penso davvero che questo approccio sia buono, ma nel mio caso dovevo farlo una volta e dimenticarmene, quindi sono andato sul sito Web di babel , ho trasferito online da es6 a es5 e ho sostituito l'output!