来自UglifyJs的bundle.js中的错误

我已经完成了一个项目，现在是时候build立它了。 我正在使用一个样板项目，仍然不完全理解所有npm / webpack的内幕。 当运行“npm start”时，我收到错误：

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

在这个问题上search了一个小时后，我仍然无法解决它。 根据我的理解，这个问题正在发生，因为Uglify还不喜欢ES2016。 然而，我在互联网上find的解决scheme似乎没有工作，或者没有足够的意义，我来执行。

我发现这个stackoverflow的问题，并改变了我的项目的package.json文件中的webpack行到：

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

但是这不起作用。 分叉webpack的另一个build议目前还不在我的理解之中。

我也尝试在另一个build议运行我的src文件夹上运行babel，但是这似乎并没有做任何事情，或者我不正确地运行它。

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

非常感激！

Answer 1

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

由于您使用的是Webpack 2，所以您需要的最简单的Babelconfiguration是：

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

这将需要babel-preset-es2015预设。 把上面的.babelrc放在上面，你的babel-loader会照顾其余的。

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

Answer 2

尝试我的cfg，现实，我find了答案在https://github.com/joeeames/WebpackFundamentalsCourse/issues/3

npm install babel --save-dev

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

             {
                testing：/\.js$/，
                排除：/（node_modules | bower_components）/，
                使用： {
                    装载机：“babel-loader”，
                    查询：{
                        预设：[“es2015”]
                     }
                 }
             }，

Answer 3

确保你已经将.babelrc文件添加到你的文件夹的根目录，并且它包含了这个

 { "presets": [ "es2015" ] } 

Answer 4

简单的教UglifyJS ES6

有两个版本的UglifyJS – ES5和ES6 （和谐）， 参见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插件的版本，你必须明确地安装和使用它。 这取代了构build的webpack.optimize.UglifyJsPlugin

 npm install uglifyjs-webpack-plugin --save yarn add uglifyjs-webpack-plugin 

Webpackconfiguration文件

 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