首先
是由于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就可以解决;之所以在已经有错误提示的情况下还是没有往这方面想,主要是因为并不知道还有这个配置文件.