UglifyJS 抛出意外的标记：keyword (const) with node_modules

Posted 2023-02-16

【中文标题】UglifyJS 抛出意外的标记：keyword (const) with node_modules

【英文标题】：UglifyJS throws unexpected token: keyword (const) with node_modules

【发布时间】：2018-05-06 10:47:30

【问题描述】：

我开始的一个小项目使用声明const 变量的节点模块（通过npm 安装）。运行测试这个项目很好，但是执行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 并且似乎可以正常工作。

【问题讨论】：

不是node版本的问题吗？您不需要像节点 8+ 一样有 const 可用吗？ （不确定它是什么时候引入的）

我从 v4 开始就一直在使用 const。我目前正在使用 8.9.1 LTS。

好吧，那很奇怪。您看到的错误信息是什么？

@this.lau_ 与标题中的错误消息相同，但为了清楚起见，我也在问题中添加了它。

不一定非要与“const”有关。它可能是您需要的模块之一。

【参考方案1】：

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

奇怪的是，你使用的包并没有将其文件转换为 es5 以便在任何地方使用。

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

作为Ser mentionned，您现在应该使用terser-webpack-plugin。

【讨论】：

也可以替换gulp-uglifyby gulp-uglify-es:npmjs.com/package/gulp-uglify-es

UglifyJS does not support es6 。谢谢！我在任何地方都找不到那条信息。

如果迁移到 webpack 超出您的预算，请使用 gulp-terser。

【参考方案2】：

作为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,
    ,
  ),

Source

【讨论】：

也许你应该建议npm install --save-dev terser-webpack-plugin。

我真的很感激这个答案，因为它让我想起了terser-webpack-plugin 在下面使用的 terser 库。其他人的注意事项：terser 可以像 uglify-js 一样作为 cli 独立使用（即 webpack 不是必需的），这正是我所需要的。

但是我们需要通过webpack来使用这个方案吗？

@enrique 取决于您想做什么，要构建一个符合实际业务需求的网站，您绝对应该尝试使用 webpack。我们在 webpack 社区遇到了这个问题，所以我的回答得到了很好的评价，但从技术上讲，你不需要 webpack 来构建 ES6 代码

Terser 在 github.com/webpack/webpack/pull/8392 中被精选到 webpack@4

【参考方案3】：

使用 uglify-es-webpack-plugin 更好

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



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

【讨论】：

这是一个观点，请详细说明为什么它更好。

【参考方案4】：

我已在 phpStorm 的 GUI 中将 UglifyJS 替换为 YUI Compressor JS。它现在可以工作了。

【参考方案5】：

我刚刚在重构的 Gulp 项目中遇到了这个问题，由于某种原因，我在使用官方 Terser Gulp 插件时遇到了问题。 This one (gulp-terser) 没有问题。

【参考方案6】：

我真的不认为这种方法很好，但在我的情况下，我需要这样做一次然后忘记它，所以我只是去了 babel's website ，在线将 es6 转换为 es5 并替换了输出！

【参考方案7】：

我遇到了同样的问题，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”处理

您的其余代码无需更改。

最好的问候！

【讨论】：

经过测试并使用“node : v12.14”、“gulp cli v2.2.1”、“gulp local v4.0.2”。