Javascript UglifyJS 抛出意外标记：keyword (const) with node_modules
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47439067/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
UglifyJS throws unexpected token: keyword (const) with node_modules
提问by Yanick Rochon
A small project I started make use a node module (installed via npm) that declares constvariables. Running and testing this project is well, but browserify fails when UglifyJS is executed.
我开始的一个小项目使用了一个声明变量的节点模块（通过npm安装）const。运行和测试这个项目是好的，但是执行UglifyJS时browserify失败了。
Unexpected token: keyword (const)
意外标记：关键字（const）
Here is a generic Gulp file that I have successfully been using for a few other past projects without this issue (i.e. without that particular node module).
这是一个通用的 Gulp 文件，我已经成功地将它用于其他几个过去的项目，没有这个问题（即没有那个特定的节点模块）。
gulpfile.js
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))
;
});
I have tried fixing this by replace all constto varin that npm-installed module, and everything is fine. So I do not understand the failure.
我尝试通过在安装了 npm 的模块中全部替换const为来解决这个问题var，一切都很好。所以我不明白失败。
What's wrong with const? Unless someone uses IE10, allmajor browsers support this syntax.
怎么了const？除非有人使用 IE10，否则所有主流浏览器都支持此语法。
Is there a way to fix this without requiring a change to that node module?
有没有办法在不需要更改该节点模块的情况下解决这个问题？
Update
更新
I have temporarily (or permanently) replaced UglifyJS with Butternutand seem to work.
我暂时（或永久）用Butternut替换了 UglifyJS并且似乎有效。
回答by Ser
As ChrisR mentionned, UglifyJS does not support ES6 at all.
正如ChrisR 提到的，UglifyJS 根本不支持 ES6。
You need to use terser-webpack-pluginfor ES6 (webpack@5 will use this plugin for uglification)
ES6需要使用terser-webpack-plugin（webpack@5 会使用这个插件进行丑化）
npm install terser-webpack-plugin --save-dev
Then define in your pluginsarray
然后在你的plugins数组中定义
const TerserPlugin = require('terser-webpack-plugin')
new TerserPlugin({
parallel: true,
terserOptions: {
ecma: 6,
},
}),
回答by ChrisR
UglifyJS does not support es6. constis an es6 declaration, so it throws an error.
UglifyJS 不支持 es6。const是 es6 声明，因此会引发错误。
What is weird is that the package you use does not transpile its files to es5 to be used anywhere.
奇怪的是，您使用的包没有将其文件转换为 es5 以便在任何地方使用。
If you want to still use UglifyJS (to re-use the configuration for example) use the ES6+ compatible version, uglify-es. (Warning: uglify-esis now abandoned.)
如果您仍想使用 UglifyJS（例如重新使用配置），请使用 ES6+ 兼容版本uglify-es。（警告：uglify-es在现在放弃了。）
And as Ser mentionned, you should now use terser-webpack-plugin.
正如Ser 所提到的，您现在应该使用terser-webpack-plugin.
回答by Christiyan
I had the same issue and the gulp plugin gulp-uglify-esresolved the problem.
我遇到了同样的问题，gulp 插件gulp-uglify-es解决了这个问题。
I think it's the simpliest desision.
我认为这是最简单的决定。
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 .defaultis crutial otherwise you'll have an error that uglify is not a function.
NB 属性.default很重要，否则你会得到 uglify 不是函数的错误。
As mentioned above and as being part of ES6 constoperator can only be processed by more modern es6 gulp plugin "gulp-uglify-es"
如上所述，作为 ES6 const运算符的一部分，只能由更现代的 es6 gulp 插件“gulp-uglify-es”处理
The rest of your code no need to be changed.
其余代码无需更改。
Best regards!
此致！
回答by NetOperator Wibby
回答by Gh111
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!
我真的不认为这种方法是好的，但在我的情况下，我需要这样做一次并忘记那件事，所以我去了babel 的网站，将 es6 在线转换为 es5 并替换输出！
回答by NEO ViSiON
Use uglify-es-webpack-plugin is better
使用 uglify-es-webpack-plugin 更好
const UglifyEsPlugin = require('uglify-es-webpack-plugin')
module.exports = {
plugins: [
new UglifyEsPlugin({
compress:{
drop_console: true
}
}),
]
}
回答by Sjoerd
I have replaced UglifyJSwith YUI Compressor JSinside the GUI of PHPStorm.. It works now.
我已经取代UglifyJS与YUI Compressor JSPHPStorm的GUI内..它现在。
