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