简单教授UglifyJS ES6

Question

我已经完成了一个项目，现在是时候构建它了。我正在使用样板项目，但仍然不能完全理解所有npm / webpack内容。当运行＆＃34; npm start＆＃34;时，我收到错误：

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，以充分了解正在发生的事情。

非常感谢！

Answer 1

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

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

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

这需要babel-preset-es2015预设。将上述内容放在.babelrc中，您的babel-loader会处理其余内容。

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

Answer 2

尝试我的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 3

简单教授UglifyJS ES6

有两个版本的UglifyJS - ES5 和 ES6 （和谐），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()
  ]
};

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

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

来自UglifyJs

6 个答案:

简单教授UglifyJS ES6

UglifyJS WebPack插件