UglifyJS 抛出意外的令牌: 关键字(const)和 node_module

我开始的一个小项目使用一个节点模块(通过 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，从而解决这个问题，一切都很好。所以我不明白失败的原因。

除非有人使用 IE10，否则 所有主流浏览器都支持这种语法。

有没有办法不需要更改该节点模块就可以解决这个问题？

更新

我已经暂时(或永久)用 胡桃取代 UglifyJS，并且似乎有效。

66381 次浏览
小开

UglifyJS does not support es6. const is an es6 declaration, so it throws an error.

What is weird is that the package you use does not transpile its files to es5 to be used anywhere.

If you want to still use UglifyJS (to re-use the configuration for example) use the ES6+ compatible version, uglify-es. (Warning: uglify-es is now abandoned.)

And as Ser mentionned, you should now use terser-webpack-plugin.

小开
最佳答案

As ChrisR mentionned, UglifyJS does not support ES6 at all.

You need to use terser-webpack-plugin for ES6 (webpack@5 will use this plugin for uglification)

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

Then define in your plugins array

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


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

Source

小开

Use uglify-es-webpack-plugin is better

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






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

I have replaced UglifyJS with YUI Compressor JS inside the GUI of PHPStorm.. It works now.

小开

I just had this issue with a Gulp project I refactored and for some reason I was having trouble with the official Terser Gulp plugin. This one (gulp-terser) worked with no issues.

小开

I don't really think that this approach is good, but in my case I needed to do this once and forget about that, so I just went to babel's website , transpile es6 to es5 online and replaced the output!

小开

I had the same issue and the gulp plugin gulp-uglify-es resolved the problem.

I think it's the simpliest decision.

Just install:

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

after that in your code change only this line

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

to this:

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

N.B. property .default is crucial otherwise you'll have an error that uglify is not a function.

As mentioned above and as being part of ES6 const operator can only be processed by more modern es6 gulp plugin "gulp-uglify-es"

The rest of your code no need to be changed.

Best regards!


提交答案