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.js24行第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项目也遇到类似的错误,可以试试这样解决。

感慨一下:

了解问题的本质比知道问题的答案重要
遇到问题需要抽丝剥茧地逐层分析



GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐