解決vue-cli element-ui打包報錯Unexpected token: punc (() [./~/element-ui/packages/row/src/row.js

1.問題描述

我用vue-cli寫了項目，界面都是用element-ui寫的，打包時報錯：

ERROR in static/js/19.7a249ea6c2bf376ba720.js from UglifyJs

Unexpected token: punc (() [./~/element-ui/packages/row/src/row.js:24,0][static/js/19.7a249ea6c2bf376ba720.js:237,9]

2.問題了解

我了解了一下報錯資訊：

報錯說有一個錯誤在打包後的檔案中：static/js/19.7a249ea6c2bf376ba720.js，

錯誤的原因是：Unexpected token: punc (() ，即：不能識别操作符（"(()"）

源檔案出錯地方是：/element-ui/packages/row/src/row.js第24行第0列

打封包件出錯地方：static/js/19.7a249ea6c2bf376ba720.js第237行第0列

于是我找到兩個檔案出錯的代碼一看，發現代碼是一樣的！

(() => {});中的(()=>{})是es6的文法。但是現在很多浏覽器不完成支援es6文法，是以才需要在打包過程中轉換成es5文法。

static/js/19.7a249ea6c2bf376ba720.js是打包的結果，這個檔案是會放在浏覽器運作的，如果浏覽器不支援es6文法，那代碼就會出錯。

是以npm run build報出錯誤資訊，也是合理的，如果你不理會這個報錯資訊，把代碼拿取浏覽器運作，就會出錯。

3.解決問題

在自己項目中的 webpack.base.conf.js 找到了類似的地方，并加入配置

{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [resolve('src'), resolve('test'),
resolve('/node_modules/element-ui/src'),resolve('/node_modules/element-ui/packages')//---添加這行
]
},      

如果您的vue-cli項目或webpack項目也遇到類似的錯誤，可以試試這樣解決。

感慨一下：

了解問題的本質比知道問題的答案重要