【问题标题】：ERROR in bundle.js from UglifyJs来自 UglifyJs 的 bundle.js 中的错误
【发布时间】：2017-05-06 09:22:32
【问题描述】：

我已经完成了一个项目，现在是时候构建它了。我正在使用样板项目，但仍然不完全了解引擎盖下发生的所有 npm/webpack 内容。运行“npm start”时，我收到错误：

ERROR in bundle.js from UglifyJs
SyntaxError: Unexpected token: punc ()) [bundle.js:848,29]

在互联网上搜索了一个小时后，我仍然无法解决它。据我了解，这个问题的发生是因为 Uglify 还不喜欢 ES2016。但是，我在互联网上找到的解决方案似乎不起作用或对我来说没有足够的意义来实施。

我找到了这个 stackoverflow question 并将我项目的 package.json 文件中的 webpack 行更改为：

"webpack": "fulls1z3/webpack#v2.1.0-beta.27-harmony"

但这没有用。分叉 webpack 的另一个建议目前超出了我的理解。

我还尝试根据另一个建议在我的 src 文件夹上运行 babel，但这似乎没有任何作用，或者我运行不正确。

有没有人能很好地解决这个问题？我现在很困惑，还没有时间从头开始学习 npm/webpack 以完全掌握正在发生的事情。

非常感谢！

【问题讨论】：

究竟是什么样板以及 npm start 下的 package.json 中有什么？
github.com/developit/preact-boilerplate 并且 package.json 文件可以在上面的链接中找到。谢谢！
我建议您从一个没有样板的裸项目重新开始，然后慢慢构建到所需的最低复杂度。如果没有，您将需要学习如何调试构建系统。这就像调试一个程序，只是它的一系列命令/程序在 shell 中运行。
即使有人解决了这个确切的问题，你也会因为你不了解它是如何工作的项目而被搞砸的。您可能会回到 babel 问题并发布一个包含这些详细信息的新问题。但最好从简单的事情从头开始。这就是我不推荐样板项目的原因。
我绝对打算回到超级基础并学习 npm、webpack、package.json 等。我真的希望我可以解决这个问题而不必这样做，但如果没有人有有什么想法，那就是我要做的。

标签： javascript node.js npm webpack uglifyjs

【解决方案1】：

在我的情况下，我确实更改了 sourceMap:false 所以错误来了

ERROR in index.bundle.js from UglifyJs

TypeError: Cannot read property 'sections' of null.

现在当我更改sourceMap:true。

效果很好。

new webpack.optimize.UglifyJsPlugin({ sourceMap: true}),

【讨论】：

【解决方案2】：

此答案可能已过时，请参阅我的其他答案 here 上的 cmets。

简单教UglifyJS ES6

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

package.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

UglifyJS WebPack 插件

如果你想控制 webpack 插件的版本，你也必须明确地安装和使用它。这取代了内置的 webpack.optimize.UglifyJsPlugin

npm install uglifyjs-webpack-plugin --save

yarn add uglifyjs-webpack-plugin

Webpack 配置文件

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

module.exports = {
  entry: {...},
  output: {...},
  module: {...},
  plugins: [
    new UglifyJSPlugin()
  ]
};

【讨论】：

【解决方案3】：

npm i -D uglifyjs-webpack-plugin@1.3.0

在你的 webpack.conf 顶部添加这个：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

然后替换这个：

new webpack.optimize.UglifyJsPlugin({
        sourceMap: true,
        compress: {
            warnings: false
        }
    }),

通过这个：

new UglifyJsPlugin({
            "uglifyOptions":
                {
                    compress: {
                        warnings: false
                    },
                    sourceMap: true
                }
        }
    ),

【讨论】：

【解决方案4】：

确保您已将 .babelrc 文件添加到文件夹的根目录并包含此文件

{
 "presets": [
    "es2015"
 ]
}

【讨论】：

【解决方案5】：

试试我的cfg，实际情况，我在里面找到答案 https://github.com/joeeames/WebpackFundamentalsCourse/issues/3

npm install babel --save-dev

npm install babel-preset-es2015 --save-dev

{ 测试：/\.js$/，排除：/（node_modules|bower_components）/，采用： { 加载器：'babel-loader'，询问： { 预设：[“es2015”] } } },

【讨论】：

【解决方案6】：

是的，UglifyJS 只支持 ES5 语法。您需要正确配置 Babel 以将源代码转换为 ES5 语法。

由于您使用的是 Webpack 2，因此您需要的最低 Babel 配置是：

{
  "presets": [
    ["es2015", {"modules": false}]
  ]
}

这需要babel-preset-es2015 预设。将上述内容放入.babelrc，您的babel-loader 将负责其余的工作。

或者，您可以尝试babelify，这是 Babel 支持 ES6 语法的现代压缩器。如果您的目标是新版本，我强烈推荐。

【讨论】：

添加你的代码给我带来了一个新的错误。 'code' 意外的令牌导入：从 'webpack' 导入 webpack； '代码'
记住，Node.js 提供了一个不支持 ES6 模块的 CommonJS 环境。在您的 Webpack 配置文件中恢复使用纯 require()，您将支持其他 ES6 功能（节点 6 和节点 7 与规范兼容 97%）。否则，您需要手动配置 Babel 的 Node.js 运行时或 babel-loader，因为设置会冲突。