来自 UglifyJs 的 bundle.js 中的错误

Question

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

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

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

我发现了这个stackoverflow 问题并将我项目的 package.json 文件中的 webpack 行更改为：

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

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

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

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

非常感激！

Answer 1

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

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

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

这将需要babel-preset-es2015预设。 将上述内容放入.babelrc ，你的babel-loader会处理剩下的。

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

Answer 2

此答案可能已过时，请参阅此处对我的其他答案的评论。

简单教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

UglifyJS WebPack 插件

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

npm install uglifyjs-webpack-plugin --save

yarn add uglifyjs-webpack-plugin

网络包配置文件

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

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

---

有关更多 webpack 信息，请参阅
https://github.com/webpack-contrib/uglifyjs-webpack-plugin#install
https://github.com/mishoo/UglifyJS2/tree/harmony

Answer 3

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

npm install babel --save-dev

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

{
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    query: {
                        presets: ["es2015"]
                    }
                }
            },

Answer 4

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
                }
        }
    ),

Answer 5

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

{
 "presets": [
    "es2015"
 ]
}

Answer 6

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

ERROR in index.bundle.js from UglifyJs

TypeError: Cannot read property 'sections' of null.

现在，当我更改sourceMap:true 。

它工作得很好。

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