babel7.×版本配置问题

版本问题导致的babel配置出错

在这里总结以下7.×以上版本的配置,首先我们看一下6.0×版本
在这里插入图片描述
这里是6.0×版本的时候我们所下载的包,如果我们需要用最新版本的话,阔以按照我以下的步骤,可以查看官方文档babel-loader

1、先将我们所下的包卸载,当然之前还是先查看一下babel-cli的版本

卸载之后重新执行:

cnpm i @babel/cli @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/preset-react @babel/preset-stage-0

我这里是配置react的jsx语法所需,所以我全部摘下来了,下载好后版本情况是这样的:
在这里插入图片描述

2、下载好之后将node_modules删除,重新npm install

这里如果之前没有安装7.×版本以下的话可以省掉,但是装过了的话,一定删了重新npm install。

3、我们重新配置.babelrc文件和webpack-config.js

.babelrc:

{
  "presets": ["@babel/env","@babel/react"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

注意:这里不能在presets配置@stage-0,详细请参考官方文档preset-stage-0
webpack-config.js:

module:{
    rules: [
      {
        test: /\.js|jsx$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader'
        },
      }
    ]
  }

以上就是解决问题的步骤,要么都降低版本,要么都升级版本,如果你的package.json文件里面又有6.×版本又有7.×版本肯定是会冲突的。所以还是得多看官方文档才行。

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值