Javascript 丑化语法错误：意外标记：punc ())
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42375468/
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
Uglify SyntaxError: Unexpected token: punc ())
提问by Alexander
I am trying to use gulp in order to minify a folder containing JS files. However, one of the files has the above error, preventing it from being minified.
我正在尝试使用 gulp 来缩小包含 JS 文件的文件夹。但是，其中一个文件存在上述错误，无法缩小。
I managed to catch and print the error, which I've partially printed here:
我设法捕获并打印了错误，我在这里部分打印了它：
JS_Parse_Error {
message: 'SyntaxError: Unexpected token: punc ())',
filename: 'ex.js',
line: 189,
col: 25,
pos: 6482,
stack: Error\n at new JS_Parse_Error (eval at <anonymous> ... )
plugin: 'gulp-uglify',
fileName: '.../js/ex.js',
showStack: false
}
The file in question contains the following, shortened:
有问题的文件包含以下内容，已缩短：
function() {
...
$.confirm({
buttons: {
confirm: function() {
$.post('/ajax-handler', {
...
})
.done( function(response) {
var data = filterResponse(response);
if (data['status'] == 'success') {
sleep(1000).then(() => {
* ...
});
sleep(5000).then(() => {
...
});
} else {
console.log('Oops!');
}
})
.fail( function(err, status, response) {
...
});
},
cancel: function() {}
}
});
...
}
I added the "*" above in order to indicate the exact position listed by JS_Parse_Error.
我在上面添加了“*”以指示 JS_Parse_Error 列出的确切位置。
回答by Qwerty
// Update
// 更新
?v2.0.0 (2018-09-14)?- BREAKING CHANGES (link)
Switch back to uglify-js(uglify-es is abandoned, if you need uglify ES6 code please use terser-webpack-plugin).
?v2.0.0 (2018-09-14)?- 重大变化（链接）
切换回uglify-js（uglify-es 已弃用，如果需要uglifyES6 代码请使用terser-webpack-plugin）。
Original answer before the update...
更新前的原始答案...
I hope you can get inspired by this solution which works with webpack. (link below)
我希望你能从这个适用于 webpack 的解决方案中得到启发。（下方链接）
Simply teach UglifyJS ES6
简单教UglifyJS ES6
There are two versions of UglifyJS - ES5and ES6(Harmony), see on git
ES5 version comes by default with all the plugins, but if you install a Harmony version explicitly, those plugins will use it instead.
UglifyJS 有两个版本 - ES5和ES6(Harmony)，请参阅 git
ES5 版本默认随所有插件一起提供，但是如果您明确安装 Harmony 版本，这些插件将使用它。
package.json
包.json
"uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony"
or
或者
npm install --save uglify-js@github:mishoo/UglifyJS2#harmony
yarn add git://github.com/mishoo/UglifyJS2#harmony --dev
Webpack
网络包
To use it with webpack install also the webpack plugin
要与 webpack 一起使用，还需要安装 webpack 插件
npm install uglifyjs-webpack-plugin --save-dev
yarn add uglifyjs-webpack-plugin --dev
then import the manually installed plugin
然后导入手动安装的插件
var UglifyJSPlugin = require('uglifyjs-webpack-plugin');
and replace it in code
并在代码中替换它
- new webpack.optimize.UglifyJsPlugin({ ... })
+ new UglifyJSPlugin({ ... })
For more webpack info (Installation/Usage) see https://github.com/webpack-contrib/uglifyjs-webpack-plugin#install
有关更多 webpack 信息（安装/使用），请参阅https://github.com/webpack-contrib/uglifyjs-webpack-plugin#install
回答by WOW
npm install uglifyjs-webpack-plugin --save-devis not enough
npm install uglifyjs-webpack-plugin --save-dev是不足够的
The main problem is "uglifyjs-webpack-plugin": "^0.4.6"in webpack's package.json
主要问题是"uglifyjs-webpack-plugin": "^0.4.6"在webpack 的 package.json
According to semver, ^0.4.6 := >=0.4.6 <0.5.0. Because of the leading zero, webpackwill never use the 1.0.0-beta.2.
据semver 称，^0.4.6 := >=0.4.6 <0.5.0。由于前导零，webpack永远不会使用1.0.0-beta.2.
So after running npm i -D uglifyjs-webpack-plugin@beta, you need to do one more step which is rm -rf node_modules/webpack/node_modules/uglifyjs-webpack-plugin. Then webpack will pick up the version from node_modules/uglifyjs-webpack-plugininstead of node_modules/webpack/node_modules/uglifyjs-webpack-plugin
所以跑完之后npm i -D uglifyjs-webpack-plugin@beta，你还需要再做一步，那就是rm -rf node_modules/webpack/node_modules/uglifyjs-webpack-plugin. 然后 webpack 将从而node_modules/uglifyjs-webpack-plugin不是从node_modules/webpack/node_modules/uglifyjs-webpack-plugin
Update on 2018-04-18: webpack v4 does not have this issue
2018-04-18 更新：webpack v4 没有这个问题
回答by Qing
Add the babel-preset-es2015dependency to fix this.
添加babel-preset-es2015依赖项来解决这个问题。
And also add 'es2015'in .babelrcfile.
并且还添加'es2015'到.babelrc文件中。
json
{
"presets": ["es2015"]
}
回答by Hamza Khan
I am having the same issue, i found a great answers herethat helped me to reach the the file that was causing the error.
我遇到了同样的问题，我在这里找到了一个很好的答案 ，帮助我找到了导致错误的文件。
Go to Rails Console and Paste:
转到 Rails 控制台并粘贴：
JS_PATH = "app/assets/javascripts/**/*.js";
Dir[JS_PATH].each do |file_name|
puts "\n#{file_name}"
puts Uglifier.compile(File.read(file_name))
end
Hope it helps someone!
希望它可以帮助某人！
回答by amicoderozer
If you got this error using Grunt (grunt-contrib-uglify) the solution is to install ES6 version of the plugin:
如果您在使用 Grunt (grunt-contrib-uglify) 时遇到此错误，解决方案是安装插件的 ES6 版本：
npm install grunt-contrib-uglify-es --save-dev
回答by spaceemotion
For me it had nothing to do with Uglify not working correctly, but rather a dependency (in this case empty-promise) that has not been compiled to ES5 yet. As we just imported the raw source file, but babel is only transpiling files outside of node_modules, uglify got confused by the ES6 syntax.
对我来说，这与 Uglify 无法正常工作无关，而是与尚未编译到 ES5 的依赖项（在这种情况下为空承诺）无关。因为我们刚刚导入了原始源文件，但是 babel 只是在 node_modules 之外转译文件，所以 uglify 被 ES6 语法弄糊涂了。
Simply check if any dependency you've recently added might not have a "dist" build.
只需检查您最近添加的任何依赖项是否可能没有“dist”构建。
回答by Cong Nguyen
Add stage-3 to presets in .babelrc file.
将 stage-3 添加到 .babelrc 文件中的预设。
{
"presets": [
"stage-3"
]
}
回答by melih sahin
I had the same problem with you. I was using gulp.js. I solved this problem thanks to js files change ES format. For example before solved is my code:
我和你有同样的问题。我正在使用 gulp.js。由于 js 文件更改了 ES 格式，我解决了这个问题。例如在解决之前是我的代码：
for (district for response) {
$('#districts').append('<option value="' + district.id + '">' + district.name + '</option>');
$('#districts').removeAttr('disabled');
}
after fix code:
修复代码后：
for (district in response) {
$('#districts').append('<option value="' + district.id + '">' + district.name + '</option>');
$('#districts').removeAttr('disabled');
}
In summary, the problem is due to Ecma-uglify.js.
综上所述，问题出在 Ecma-uglify.js 上。
