UglifyJS melempar token yang tidak diharapkan: kata kunci (const) dengan node_modules

Sebuah proyek kecil yang saya mulai gunakan modul node (diinstal melalui npm ) yang mendeklarasikan constvariabel. Menjalankan dan menguji proyek ini baik-baik saja, tetapi browserify gagal saat UglifyJS dijalankan.

Token tak terduga: kata kunci (const)

Berikut adalah file Gulp generik yang telah berhasil saya gunakan untuk beberapa proyek sebelumnya tanpa masalah ini (yaitu tanpa modul node tertentu).

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

Saya telah mencoba memperbaiki ini dengan mengganti semua constke vardalam modul yang diinstal npm, dan semuanya baik-baik saja. Jadi saya tidak mengerti kegagalannya.

Ada apa dengan const? Kecuali seseorang menggunakan IE10, semua browser utama mendukung sintaks ini.

Apakah ada cara untuk memperbaikinya tanpa perlu mengubah modul node tersebut?

Memperbarui

Saya telah mengganti UglifyJS dengan Butternut untuk sementara (atau secara permanen) dan sepertinya berhasil.

Seperti yang dikatakan ChrisR , UglifyJS sama sekali tidak mendukung ES6.

Anda perlu menggunakan terser-webpack-plugin untuk ES6 (webpack @ 5 akan menggunakan plugin ini untuk uglification)

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

Kemudian tentukan dalam pluginsarray Anda

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

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

Sumber

UglifyJS tidak mendukung es6. constadalah deklarasi es6, jadi ini melontarkan kesalahan.

Yang aneh adalah bahwa paket yang Anda gunakan tidak memindahkan file-filenya ke es5 untuk digunakan di mana saja.

Jika Anda ingin tetap menggunakan UglifyJS (untuk menggunakan kembali konfigurasi misalnya) gunakan versi yang kompatibel dengan ES6 +, uglify-es . ( Peringatan : uglify-esini sekarang ditinggalkan .)

Dan seperti yang disebutkan Ser , sekarang Anda harus menggunakan terser-webpack-plugin.

Saya memiliki masalah yang sama dan plugin gulp gulp-uglify-es menyelesaikan masalah.

Saya pikir itu keputusan paling sederhana.

Instal saja:

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

setelah itu dalam kode Anda ubah hanya baris ini

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

untuk ini:

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

Properti NB .default sangat penting jika tidak, Anda akan mendapatkan kesalahan bahwa uglify bukanlah sebuah fungsi.

Seperti disebutkan di atas dan sebagai bagian dari operator const ES6 hanya dapat diproses oleh plugin es6 gulp yang lebih modern "gulp-uglify-es"

Sisa kode Anda tidak perlu diubah.

Salam Hormat!

Saya baru saja mengalami masalah ini dengan proyek Gulp yang saya refactored dan untuk beberapa alasan saya mengalami masalah dengan plugin Terser Gulp resmi. Yang ini (gulp-terser) bekerja tanpa masalah.

Lebih baik gunakan uglify-es-webpack-plugin

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



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

Saya telah mengganti UglifyJSdengan YUI Compressor JSdi dalam GUI dari PHPStorm .. Ini berfungsi sekarang.

Saya tidak terlalu berpikir bahwa pendekatan ini bagus, tetapi dalam kasus saya, saya perlu melakukan ini sekali dan melupakannya, jadi saya hanya pergi ke situs web babel , transpile es6 to es5 online dan mengganti hasilnya!