Uglify SyntaxError：意外的标记：punc ())

Question

我正在尝试使用 gulp 来缩小包含 JS 文件的文件夹。 但是，其中一个文件存在上述错误，导致无法缩小。

我设法捕获并打印了错误，我已在此处打印了部分错误：

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
}

有问题的文件包含以下内容，已缩短：

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() {}
    }
 });
  ...
}

我在上面添加了“*”以指示 JS_Parse_Error 列出的确切位置。

Answer 1

// 更新

来自评论~ @imolit

v2.0.0 (2018-09-14) - 重大变化（链接）

切换回uglify-js （uglify-es 已被放弃，如果您需要 uglify ES6 代码请使用terser-webpack-plugin ）。

---

更新前的原始答案...

我希望你能从这个与 webpack 一起工作的解决方案中得到启发。 （下方链接）

简单教 UglifyJS ES6

UglifyJS 有两个版本 - ES5和ES6 (Harmony)，参见 git
ES5 版本默认包含所有插件，但如果您明确安装 Harmony 版本，这些插件将改为使用它。

包.json

"uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony"

要么

npm install --save uglify-js@github:mishoo/UglifyJS2#harmony

yarn add git://github.com/mishoo/UglifyJS2#harmony --dev

---

网页包

要将它与 webpack 一起使用，还要安装 webpack 插件

npm install uglifyjs-webpack-plugin --save-dev

yarn add uglifyjs-webpack-plugin --dev

然后导入手动安装的插件

var UglifyJSPlugin = require('uglifyjs-webpack-plugin');

并在代码中替换它

-  new webpack.optimize.UglifyJsPlugin({ ... })
+  new UglifyJSPlugin({ ... })

---

有关更多 webpack 信息（安装/使用），请参阅https://github.com/webpack-contrib/uglifyjs-webpack-plugin#install

Answer 2

npm install uglifyjs-webpack-plugin --save-dev是不够的

主要问题是webpack 的 package.json中的"uglifyjs-webpack-plugin": "^0.4.6"

根据semver ， ^0.4.6:= >=0.4.6 <0.5.0 。 由于前导零， webpack永远不会使用1.0.0-beta.2 。

所以在运行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

2018-04-18更新：webpack v4没有这个问题

Answer 3

添加babel-preset-es2015依赖来解决这个问题。

并在.babelrc文件中添加'es2015' 。

json
{
    "presets": ["es2015"]
}

Answer 4

我遇到了同样的问题，我在这里找到了一个很好的答案，帮助我找到了导致错误的文件。

转到 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

希望它能帮助别人！

Answer 5

如果您使用 Grunt (grunt-contrib-uglify) 时出现此错误，解决方案是安装 ES6 版本的插件：

npm install grunt-contrib-uglify-es --save-dev

Answer 6

对我来说，这与 Uglify 无法正常工作无关，而是尚未编译为 ES5 的依赖项（在本例中为 empty-promise）。 由于我们刚刚导入原始源文件，但 babel 仅转译 node_modules 之外的文件，uglify 被 ES6 语法搞糊涂了。

只需检查您最近添加的任何依赖项是否可能没有“dist”构建。

Answer 7

将 stage-3 添加到 presets in.babelrc 文件中。

{
  "presets": [
    "stage-3"
  ]
}

Answer 8

我正在尝试使用gulp来缩小包含JS文件的文件夹。 但是，其中一个文件具有上述错误，从而使其无法缩小。

我设法捕获并打印了错误，该错误已在此处部分打印：

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
}

该文件包含以下内容（简称）：

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() {}
    }
 });
  ...
}

我在上面添加了“ *”，以指示JS_Parse_Error列出的确切位置。