UglifyJs 是一個流行的JavaScript壓縮工具，它通過移除代碼中不必要的字符來減小文件體積，提高加載速度，它默認(rèn)只支持到 ES5 的語法，這意味著如果代碼中包含了 ES6 或更高版本的JavaScript語法，使用 UglifyJs 進(jìn)行壓縮時就會遇到問題。

創(chuàng)新互聯(lián)建站始終堅持【策劃先行，效果至上】的經(jīng)營理念，通過多達(dá)十年累計超上千家客戶的網(wǎng)站建設(shè)總結(jié)了一套系統(tǒng)有效的營銷推廣解決方案，現(xiàn)已廣泛運(yùn)用于各行各業(yè)的客戶，其中包括：混凝土攪拌罐車等企業(yè)，備受客戶好評。

當(dāng)您在構(gòu)建過程中遇到 UglifyJs 報錯，提示不支持 ES6 語法時，通常會出現(xiàn)類似下面的錯誤信息：

ERROR in static/js/vendor.f1c68aa2d5e85847d30e.js from UglifyJs
Unexpected token: name (i), expected: punc (;) [./node_modules/elementui/src/utils/merge.js:2,0][static/js/vendor.f1c68aa2d5e85847d30e.js:17064,11]

這個錯誤是由于 UglifyJs 在壓縮過程中遇到了它不識別的 ES6 語法，如箭頭函數(shù)、模板字符串、let、const 等關(guān)鍵字。

為了解決這個問題，我們需要采取以下措施：

我們需要明確的是，UglifyJs 的最新版本（uglifyjs@3）并不支持 ES6 語法，如果您的代碼中包含了 ES6 語法，或者您使用的第三方庫（如 elementui）包含了 ES6 代碼，那么您需要先將這些代碼轉(zhuǎn)換為 ES5。

一種常見的做法是使用 Babel 和 babelloader。Babel 是一個廣泛使用的JavaScript編譯器，能夠?qū)?ES6+ 代碼轉(zhuǎn)換為 ES5，以下是配置方法：

1、確保您已經(jīng)安裝了 babelloader 和相關(guān)的 Babel 插件和預(yù)設(shè)。

npm install savedev babelloader @babel/core @babel/presetenv

2、修改 webpack 配置文件（webpack.base.conf.js），確保 babelloader 會處理所有的 .js 文件。

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /.js$/,
        loader: 'babelloader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/elementui')] // 確保包含了使用ES6的第三方庫
      }
      // ...
    ]
  },
  // ...
};

3、創(chuàng)建或更新 .babelrc 配置文件，使用 @babel/presetenv 預(yù)設(shè)。

{
  "presets": [
    "@babel/presetenv"
  ]
}

上述配置確保了 Babel 會將所有通過 babelloader 處理的文件中的 ES6 代碼轉(zhuǎn)換為 ES5，這樣 UglifyJs 就可以正常壓縮這些文件了。

如果上述方法仍無法解決您的問題，或者您希望尋找替代 UglifyJs 的方案，可以考慮以下做法：

1、使用 terserwebpackplugin 替代 UglifyJsPlugin。terserwebpackplugin 是一個基于 Terser 的 webpack 插件，Terser 是 uglifyes 的一個分支，它支持 ES6 語法。

安裝 terserwebpackplugin：

“`bash

npm install terserwebpackplugin savedev

“`

在 webpack 配置文件中使用：

“`javascript

const TerserPlugin = require(‘terserwebpackplugin’);

module.exports = {

// …

optimization: {

minimizer: [

new TerserPlugin({

// 可以在這里設(shè)置terser的選項

})

]

}

// …

};

“`

2、檢查您的 package.json 中 dependencies 和 devDependencies 中的依賴版本，確保它們與 ES6 兼容。

通過這些措施，您應(yīng)該能夠解決 UglifyJs 壓縮 ES6 代碼時遇到的報錯問題，確保項目能夠順利構(gòu)建，記住，始終關(guān)注您使用的工具和插件的最新動態(tài)，以便在遇到問題時能夠快速找到合適的解決方案。

文章名稱：uglifyjses6報錯
URL地址：http://uogjgqi.cn/article/cochccc.html