在学习react,配置babel解决ES6代码时遇到的最新的问题

首先
是由于babel7 的发布,在.babelrc中的配置,和下载的配置文件的差别
其中@babel/preset-env替换了以往的babel-preset-es2015
可以查看babeljs.io

如何启用jsx语法**
 1. 安装`babel`插件
     - 运行`cnpm i @babel/core babel-loader @babel/plugin-transform-runtime -D`
     - 运行`cnpm i @babel/preset-env @babel/preset-stage-0 -D`
 2. 安装能够转换识别jsx语法的包`babel-preset-react`
     - 运行`cnpm i @babel/preset-react -D`
 3. 添加`.babelrc`配置文件
     {
       "presets":["@babel/preset-env","@babel/preset-react"],
       "plugins":["@babel/plugin-transform-runtime"]
     }

在写完这里的配置文件的 时候以为就可以解析所有的ES6代码,结果,在写class类的时候,报出了这个错误**Module not found: Error: Can’t resolve ‘@babel/runtime/helpers/classCallCheck’ **
这里的错误是在我在js文件里加入ES6里的class关键字后出现的,
所以解决的思路如下:
1.检查是否缺少解析ES6语法的babel文件,结果查到之前是利用es-2015这种文件来进行处理的,参考上面的介绍,现在换成了@babel/preset-env,所以以为并不缺少
2.查博客,文档,大部分时候都是这么走,这次也是这么着,可能走了很多弯路,没解决
3.这里打开了解决的思路
好吧,看起来很蠢,因为只是再安装一个@babel/runtime就可以解决;之所以在已经有错误提示的情况下还是没有往这方面想,主要是因为并不知道还有这个配置文件.
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值