UglifyJS löst ein unerwartetes Token aus: keyword (const) mit node_modules

In einem kleinen Projekt, das ich gestartet habe, wird ein Knotenmodul (über npm installiert ) verwendet, das constVariablen deklariert . Das Ausführen und Testen dieses Projekts ist in Ordnung, aber browserify schlägt fehl, wenn UglifyJS ausgeführt wird.

Unerwartetes Token: Schlüsselwort (const)

Hier ist eine generische Gulp-Datei, die ich erfolgreich für einige andere frühere Projekte ohne dieses Problem verwendet habe (dh ohne dieses bestimmte Knotenmodul).

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

Ich habe schon versucht , diese Fixierung durch alle zu ersetzen , constum varin diesem npm installierten Modul, und alles ist in Ordnung. Also verstehe ich den Fehler nicht.

Was ist los mit const? Sofern nicht jemand IE10 verwendet, unterstützen alle gängigen Browser diese Syntax.

Gibt es eine Möglichkeit, dies zu beheben, ohne dass eine Änderung an diesem Knotenmodul erforderlich ist?

Aktualisieren

Ich habe UglifyJS vorübergehend (oder dauerhaft) durch Butternut ersetzt und scheine zu funktionieren.

Wie ChrisR erwähnte , unterstützt UglifyJS ES6 überhaupt nicht.

Sie müssen das Terser-Webpack-Plugin für ES6 verwenden (Webpack @ 5 verwendet dieses Plugin zur Uglifizierung).

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

Dann definieren Sie in Ihrem pluginsArray

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

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

Quelle

UglifyJS unterstützt es6 nicht. constist eine es6-Deklaration, daher wird ein Fehler ausgegeben.

Was seltsam ist, ist, dass das Paket, das Sie verwenden, seine Dateien nicht in es5 transpiliert, um irgendwo verwendet zu werden.

Wenn Sie UglifyJS weiterhin verwenden möchten (um beispielsweise die Konfiguration wiederzuverwenden), verwenden Sie die ES6 + -kompatible Version uglify-es . ( Warnung : uglify-eswird jetzt aufgegeben .)

Und wie Ser erwähnt hat , sollten Sie jetzt verwenden terser-webpack-plugin.

Ich hatte das gleiche Problem und das gulp-Plugin gulp-uglify-es löste das Problem.

Ich denke, es ist die einfachste Entscheidung.

Einfach installieren:

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

Danach ändern Sie in Ihrem Code nur noch diese Zeile

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

dazu:

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

Die NB-Eigenschaft .default ist von entscheidender Bedeutung, da sonst der Fehler auftritt, dass uglify keine Funktion ist.

Wie oben erwähnt und als Teil des ES6 const- Operators kann nur das modernere es6-gulp-Plugin "gulp-uglify-es" verarbeitet werden.

Der Rest Ihres Codes muss nicht geändert werden.

Freundliche Grüße!

Ich hatte gerade dieses Problem mit einem Gulp-Projekt, das ich überarbeitet habe, und aus irgendeinem Grund hatte ich Probleme mit dem offiziellen Terser Gulp-Plugin. Dieser (Schlucker) arbeitete ohne Probleme.

Verwenden Sie uglify-es-webpack-Plugin ist besser

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



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

Ich habe ersetzt UglifyJSmit YUI Compressor JSin der GUI von PhpStorm .. Es funktioniert jetzt.

Ich denke nicht wirklich, dass dieser Ansatz gut ist, aber in meinem Fall musste ich dies einmal tun und das vergessen, also ging ich einfach auf die Website von babel , transpilierte es6 zu es5 online und ersetzte die Ausgabe!