UglifyJS кидає несподіваний маркер: ключове слово (const) з node_modules

Невеликий проект, який я розпочав, використовує модуль вузла (встановлений через npm ), який оголошує constзмінні. Запуск та тестування цього проекту добре, але браузерна перевірка не вдається виконати UglifyJS.

Несподіваний маркер: ключове слово (const)

Ось загальний файл Gulp, який я успішно використовував для кількох інших минулих проектів без цієї проблеми (тобто без цього конкретного модуля вузла).

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

Я спробував це виправити, замінивши все constна varцей модуль, встановлений npm, і все нормально. Тому я не розумію невдачі.

В чому проблема const? Якщо хтось не використовує IE10, усі основні браузери підтримують цей синтаксис.

Чи є спосіб це виправити, не вимагаючи зміни цього модуля вузла?

Оновлення

Я тимчасово (або назавжди) замінив UglifyJS на Butternut і, здається, працює.

Як згадував ChrisR , UglifyJS взагалі не підтримує ES6.

Вам потрібно використовувати плагін terser-webpack для ES6 (webpack @ 5 використовуватиме цей плагін для углифікації)

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

Потім визначте у своєму pluginsмасиві

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

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

Джерело

UglifyJS не підтримує es6. constє декларацією es6, тому видає помилку.

Що дивно, так це те, що пакунок, який ви використовуєте, не транспілює свої файли до es5 для будь-якого використання.

Якщо ви все одно хочете використовувати UglifyJS (наприклад, для повторного використання конфігурації), використовуйте сумісну версію ES6 +, uglify -es . ( Попередження : uglify-esвід цього покинуто .)

І як згадував Сер , тепер вам слід використовувати terser-webpack-plugin.

У мене була та сама проблема, і плагін gulp gulp-uglify-es вирішив проблему.

Я думаю, це найпростіше рішення.

Просто встановіть:

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

після цього у коді змініть лише цей рядок

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

до цього:

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

Властивість NB .default має вирішальне значення, інакше ви отримаєте помилку, що uglify не є функцією.

Як вже згадувалося вище, і як частина оператора const ES6 може оброблятися лише більш сучасним плагіном es6 gulp "gulp-uglify-es"

Решту коду змінювати не потрібно.

З найкращими побажаннями!

У мене щойно виникла ця проблема з проектом Gulp, який я відновив, і чомусь у мене виникли проблеми з офіційним плагіном Terser Gulp. Цей (gulp-terser) працював без проблем.

Краще використовувати uglify-es-webpack-plugin

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



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

Я замінив UglifyJSна YUI Compressor JSвнутрішній графічний інтерфейс PHPStorm .. Він працює зараз.

Я насправді не вважаю, що такий підхід хороший, але в моєму випадку мені потрібно було зробити це один раз і забути про це, тому я просто зайшов на веб-сайт Babel, переклав es6 на es5 в Інтернеті і замінив результат!