webentwicklung-frage-antwort-db.com.de

UglifyJS löst unerwartetes Token aus: Schlüsselwort (const) mit node_modules

Ein kleines Projekt, das ich gestartet habe, verwendet ein Knotenmodul (installiert über npm), das const-Variablen deklariert. Das Ausführen und Testen dieses Projekts ist gut, 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 Projekte in der Vergangenheit ohne dieses Problem verwendet habe (d. H. Ohne das betreffende 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 versucht, dies zu beheben, indem Sie alle const in var in diesem npm-installierten Modul ersetzen, und alles ist gut. Also verstehe ich den Misserfolg nicht.

Was ist los mit const? Sofern nicht IE10 verwendet wird, unterstützen all Major-Browser diese Syntax.

Gibt es eine Möglichkeit, dies zu beheben, ohne dass das Knotenmodul geändert werden muss?

Aktualisieren

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

javascriptnpmgulpbabeljsuglifyjs2
24
Yanick Rochon

November 2018 Update:

Verwenden Sie terser-webpack-plugin für ES6 (webpack @ 5 verwendet dieses Plugin für die Uebertragung)

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

Definieren Sie dann in Ihrem plugins-Array

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

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

Quelle

21
Ser

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

Seltsam ist, dass das von Ihnen verwendete Paket seine Dateien nicht für es5 transilt, damit es überall verwendet werden kann.

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

Und da Ser erwähnt ist, sollten Sie jetzt terser-webpack-plugin verwenden.

16
ChrisR

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) funktionierte ohne Probleme.

2
NetOperator Wibby

Verwenden Sie das uglify-es-webpack-plugin

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



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

Ich habe UglifyJS mit YUI Compressor JS In der GUI von PHPStorm ersetzt. Es funktioniert jetzt.

0
Sjoerd