web-dev-qa-db-ja.com

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

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

予期しないトークン：キーワード（定数）

これは、この問題なしで（つまり、特定のノードモジュールなしで）他のいくつかの過去のプロジェクトで使用している一般的な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を使用しない限り、all主要なブラウザーはこの構文をサポートします。

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

更新

私は一時的に（または恒久的に）UglifyJSを Butternut に置き換えましたが、動作しているようです。

javascriptnpmgulpbabeljsuglifyjs2
45
Yanick Rochon

2018年11月の更新：

ES6には terser-webpack-plugin を使用します（webpack @ 5はこのプラグインをUglificationに使用します）

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

次に、plugins配列で定義します

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

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

ソース

42
Ser

UglifyJSはes6をサポートしていません。 constはes6宣言であるため、エラーがスローされます。

奇妙なのは、使用するパッケージがファイルをes5に変換せず、どこでも使用できることです。

UglifyJSを引き続き使用する場合（たとえば、構成を再利用するため）、ES6 +互換バージョン、 glify-es を使用します。 （警告：uglify-es is now abandoned 。）

そして Ser前述 のように、terser-webpack-pluginを使用する必要があります。

22
ChrisR

リファクタリングしたGulpプロジェクトでこの問題が発生しましたが、何らかの理由で公式のTerser Gulpプラグインで問題が発生していました。 これ （gulp-terser）は問題なく動作しました。

2
NetOperator Wibby

Uglify-es-webpack-pluginを使用することをお勧めします

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



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

PHPStormのGUI内でUglifyJSをYUI Compressor JSに置き換えました。これで動作します。

0
Sjoerd