UglifyJS抛出意外的令牌:带有node_modules的关键字(const)


90

我开始的一个小项目使用一个节点模块(通过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安装的模块const来解决此问题var,一切都很好。所以我不了解失败。

这有什么错const?除非有人使用IE10,所有主流浏览器都支持此语法。

有没有解决方法,而无需更改该节点模块?

更新资料

我暂时(或永久)用Butternut替换了UglifyJS,并且似乎可以正常工作。


节点版本不是问题吗?您是否不需要像节点8+一样const可用?(不确定何时真正引入)
laurent

const从v4开始,我一直在使用。我目前正在使用8.9.1 LTS。
亚尼克·罗雄

好的,那很奇怪。您看到的错误消息是什么?
laurent

@ this.lau_与标题中的错误消息相同,但为清楚起见,我也将其添加到问题中。
亚尼克·罗雄

它不一定必须与“ const”有关。它可能是您需要的模块之一。
詹姆斯

Answers:


92

正如ChrisR所提到的,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,
    },
  }),

资源


1
也许你应该建议npm install --save-dev terser-webpack-plugin
拉法

2
我非常感谢这个回答,因为它使我想起了在下面使用的terserlib terser-webpack-plugin。其他提示:terser可以像cli一样独立使用uglify-js(即不需要webpack),这正是我所需要的。
John Lee

1
但是我们需要使用webpack来使用此解决方案吗?
Enrique

@enrique取决于您要做什么,要建立一个符合实际业务需求的网站,您绝对应该尝试使用webpack。我们有这个问题上的WebPack社区,所以我的答案是很好评为但在技术上你不需要的WebPack建立ES6码
丝氨酸

更简洁被樱桃挑的WebPack @ 4 github.com/webpack/webpack/pull/8392
Trivikram

39

UglifyJS不支持es6。 const是es6声明,因此会引发错误。

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

如果您仍想使用UglifyJS(例如,重新使用配置),请使用ES6 +兼容版本uglify-es。(警告uglify-es现在放弃了。)

正如Ser提到的,现在应该使用terser-webpack-plugin


3
您也可以替换gulp-uglifygulp-uglify-esnpmjs.com/package/gulp-uglify-es
ChrisR

3
UglifyJS does not support es6 。谢谢!我在任何地方都找不到该信息。
Karl Pokus

使用gulp-terser如果迁移到的WebPack是你的预算了。
Riki137 '19

7

我有同样的问题和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运算符只能由更现代的es6 gulp插件“ gulp-uglify-es”处理

您的其余代码无需更改。

最好的祝福!


经过测试并与“ node:v12.14”,“ gulp cli v2.2.1”,“ gulp local v4.0.2”一起使用。
ioojimooi

2

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


0

使用uglify-es-webpack-plugin更好

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



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

7
这是一种意见,请详细说明为什么会更好。
ChrisR

0

我已经取代UglifyJSYUI Compressor JSPHPStorm的GUI内..它现在。


0

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.