UglifyJSが予期しないトークンをスローします：node_modulesでキーワード（const）

私が始めた小さなプロジェクトでは、変数を宣言するノードモジュール（npm経由でインストール）を使用しconstます。このプロジェクトの実行とテストは問題ありませんが、UglifyJSを実行するとbrowserifyが失敗します。

予期しないトークン：キーワード（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))
  ;
});

npmがインストールされたモジュールのすべてconstをvarに置き換えることでこれを修正しようとしましたが、すべて問題ありません。だから私は失敗を理解していません。

何が問題になっていconstますか？誰かがIE10を使用しない限り、すべての主要なブラウザーはこの構文をサポートします。

そのノードモジュールを変更せずにこれを修正する方法はありますか？

更新

UglifyJSを一時的に（または永続的に）Butternutに置き換えましたが、機能しているようです。

以下のようChrisRはmentionned、UglifyJSは全くES6をサポートしていません。

ES6にはterser-webpack-pluginを使用する必要があります（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され現在放棄。）

そして、Serが述べたように、今はを使用する必要があります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が関数ではないというエラーが発生します。

上記のように、ES6 const演算子の一部であるため、最新のes6gulpプラグイン「gulp-uglify-es」でのみ処理できます。

コードの残りの部分を変更する必要はありません。

宜しくお願いします！

リファクタリングしたGulpプロジェクトでこの問題が発生したばかりで、何らかの理由で公式のTerserGulpプラグインで問題が発生していました。これ（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のGUI内。

このアプローチが良いとは思いませんが、私の場合は一度これを行う必要があり、それを忘れたので、babelのWebサイトにアクセスし、オンラインでes6からes5にトランスパイルして、出力を置き換えました。