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-plugin для 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внутри GUI PHPStorm .. Теперь он работает.

Я не думаю, что этот подход хорош, но в моем случае мне нужно было сделать это один раз и забыть об этом, поэтому я просто зашел на сайт babel , перекомпилировал es6 в es5 онлайн и заменил вывод!