webpack打包出错--elementUI使用不当惹的祸

Posted 2021-04-29 TSG前端技术分享

问题：

 从git上拉下来一个vue工程，在此基础上进行开发、调试。平时运行的时候没有发现任何问题，但是打包却老是提示打包失败。错误提示为：

ERROR in js/apps90c5c.js from UglifyJs Unexpected token name 《i》, expected punc 《;》 [js/apps90c5c.js:4171,11]

打开打包生成的js文件，找到出错的地方：

原来是ES6的语法没有被转义。 但是在自己所写的文件中，无论如何也找不多这一段代码的出处，百思不得其解。 后来问大牛磊哥，他说在node_modules文件夹下找一找，然后才发现原来是element-ui惹的祸，element-ui中有一些js是使用的ES6的语法而且没有转换为ES5。而我们的项目中，针对js文件，处理方式为：

代码示例

 
   
   
 

  
    
    
  
{
  
    
    
  
    test: /\.js$/,
  
    
    
  
    loader: "babel-loader",
  
    
    
  
   exclude: /node_modules/
  
    
    
  
}
 
   
   
 

这样，element-ui中的js就没有被babel转换。 将上面的规则改为：

 
   
   
 

  
    
    
  
{
  
    
    
  
   test: /\.js$/,
  
    
    
  
   loader: "babel-loader",
  
    
    
  
   include:[
  
    
    
  
       path.resolve(SRC_PATH),
  
    
    
  
       path.resolve(__dirname, 'node_modules/element-ui')
  
    
    
  
   ]
  
    
    
  
}
 
   
   
 

其中，SRC_PATH为项目代码目录，将element-ui目录加入babel-loader的编译范围即可解决。（注：这是单独引用Element-UI中的某一个组件导致的，如果在App.vue中直接import Element-UI，并且use，则就不会出现该问题）。