一个菜鸟的互联网技术分享博客
您的位置: 主页 > 使用vue全家桶高仿小米商城--处理安装ElementUI依赖报错
advertisement

使用vue全家桶高仿小米商城--处理安装ElementUI依赖报错

按照ElementUI官网安装时候报错不断,现在来总结下:

报错一:Plugin/Preset files are not allowed to export objects,webpack报错/babel报错的解决方法


1、为什么会报错 ?

  这里抱着错误是因为 babel 的版本冲突。

  多是因为你的 babel 依赖包不兼容。

 

  可以查看你的 package.json 的依赖列表

  即有 babel 7.0 版本的( @babel/core , @babel/preset-react )

  也可命令查看 bebel-cli 的版本 ( babel -V )

  也有 babel 6.0 版本的 ( babel-core@6.26.0 , babel-cli@6.26.0 , babel-preset-react@6.24.1 )

  

  如果在你的 package.json 依赖包中既有 babel 7.0 版本,又有 babel 6.0 版本,就会报这个错误

  很现实就是两个版本是不兼容的

 

 

2、处理方法

 

  1、升级到 babel 7.0

  

  将所有有关 babel 的包都升级为 7.0 版本

  1. "@babel/core""^7.0.0-beta.40",  
  2. "@babel/cli""^7.0.0-beta.40",  
  3. "babel-loader""^8.0.0-beta.0",  
  4. "babel-plugin-lodash""^3.3.2",  
  5. "babel-plugin-react-transform""^3.0.0",  
  6. "@babel/preset-react""^7.0.0-beta.40",<br>"@babel/preset-stage-0":'^7.0.0'  

  并且修改 .babelrc 文件

  对应的修改  presets 预设和 plugins 都改为 7.0 形式。

  1. query: {  
  2.    presets: ['@babel/react', '@babel/stage-0'],  
  3.    plugins: ['']  
  4.  }  


  2、降级到 babel 6.0 版本

  

  有时候我们看们的 package.json 里面都是 babel 6.0 版本的。

  如下:
 

  • "babel-core""^6.26.0",  
  • "babel-loader""^7.1.2",  
  • "babel-plugin-transform-runtime""^6.23.0",  
  • "babel-preset-env""^1.6.1",  
  • "babel-preset-stage-0""^6.24.1",  

  但是还是报错,为什么呢?

 

  你不妨把 node_modules 删掉,重新 install ,这样就可以处理一部分兼容问题

 

  如果上面的方法还是不行。

  你可以查看一下 babel-cli 的版本

 

    babel -V

  如果是 babel-cli 7.0 版本。

  

  那你就重新安装全局和本地的 babel-cli 版本为 6.0

  

  1. npm install -g babel-cli@6.26.0  
  2.    
  3. yarn add babel-cli@6.26.0  

  基本上面两个方法可以解决所有兼容问题。


报错二、vue 给UI库添加按需加载时启动项目时 babel-preset-es2015 报错

项目使用vue cli3脚手架工具构建
按照element 官方文档中所示。
npm install babel-plugin-component -D
然后添加.babelrc文件
{
"presets": [

["es2015", {
  "modules": false
}]

],
"plugins": [

[
  "component",
  {
    "libraryName": "element-ui",
    "styleLibraryName": "theme-chalk"
  }
]

]
}
启动项目发现缺少babel-preset-es2015 于是cnpm install --save babel-preset-es2015 安装
然后启动项目又报错了
Error: Plugin/Preset files are not allowed to export objects, only functions. In E:vue3-confignode_modulesbabel-preset-es2015libindex.js

解决方法如下:

1.安装@babel/preset-env;项目目录下,运行命令行

npm i @babel/preset-env -D

2.修改.babelrc文件,把es2015改成@babel/preset-env

{
  "presets": [["@babel/preset-env", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

3.重跑项目
其实.babelrc的配置项,可以写入到babel.config.js文件中,之后不再需要.babelrc文件了

zhangren.online
上一篇:使用vue全家桶高仿小米商城--购物车页面
下一篇:使用vue全家桶高仿小米商城--退出功能实现及优化

您可能喜欢

回到顶部