Question

我开始的一个小项目使用一个节点模块（通过 npm 安装）来声明const个变量。运行和测试这个项目很好，但是当执行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-installed模块中的所有const替换为var来解决这个问题，一切都很好。所以我不明白失败。

const有什么问题？除非有人使用IE10，否则所有主流浏览器都支持此语法。

有没有办法解决这个问题，而无需更改该节点模块？

更新

我暂时（或永久）用Butternut取代了UglifyJS，似乎有效。

Answer 1

2018年11月更新：

将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,
    },
  }),

Source

Answer 2

UglifyJS不支持es6。 const是es6声明，因此会抛出错误。

奇怪的是，您使用的软件包不会将其文件转换为es5以便在任何地方使用。

如果您仍想使用UglifyJS（例如重新使用配置），请使用ES6 +兼容版本uglify-es。（警告：uglify-es为now abandoned。）

和Ser mentionned一样，您现在应该使用terser-webpack-plugin。

Answer 3

我遇到了同样的问题，并且gulp插件 gulp-uglify-es 解决了该问题。

我认为这是最简单的决定。

只需安装：

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

之后，只需在代码中更改此行

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

对此：

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

属性 .default 是至关重要的，否则您将收到一个错误消息，指出uglify不是函数。

如上所述，作为ES6 const 运算符的一部分，只能由更现代的es6 gulp插件“ gulp-uglify-es”处理

其余代码无需更改。

最诚挚的问候！

Answer 4

使用uglify-es-webpack-plugin更好

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



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

Answer 5

我已经在PHPStorm的GUI中将UglifyJS替换为YUI Compressor JS。现在可以正常工作。

Answer 6

我刚重构的Gulp项目遇到了这个问题，由于某种原因，我在使用官方Terser Gulp插件时遇到了麻烦。 This one（gulp-terser）正常工作。

Answer 7

我并不是真的认为这种方法很好，但是就我而言，我需要做一次却忘记了这一点，所以我去了babel's website，在线将es6转换为es5并替换了输出！

UglifyJS抛出意外的令牌：关键字（const）和node_modules

gulpfile.js

更新

7 个答案: