babel7.x发布后 安装babel插件的新语法以及注意事项
安装babel插件，你踩坑了吗？
前两天做React项目 使用webpack安装babel插件时 遇到了很多问题，经过一番研究现已解决，整理成文，希望这篇文章会对你有所帮助！
我当时在安装babel时，运行的指令如下：
- 安装
babel插件- 运行
cnpm i babel-core babel-loader babel-plugin-transform-runtime -D - 运行
cnpm i babel-preset-env babel-preset-stage-0 -D
- 运行
- 安装能够识别转换jsx语法的包
babel-preset-react- 运行
cnpm i babel-preset-react -D
- 运行
- 添加
.babelrc配置文件
{
"presets":["env", "stage-0", "react"],
"plugins":["transform-runtime"]
}
截止到这里，表面上看是没有任何问题的，安装包都成功安装，但是，在执行项目时却报了一堆错误。 错误原因是：babel在2018年9月份升级了一个大的版本 Babel 7.x，语法有了很大的变动，所以我上面运行的指令已经被out了，必须使用新语法，如下：
- 安装
babel插件- 运行
cnpm i @babel/core babel-loader @babel/plugin-transform-runtime -D - 运行
cnpm i @babel/preset-env @babel/preset-stage-0 -D
- 运行
- 安装能够识别转换jsx语法的包
babel-preset-react- 运行
cnpm i @babel/preset-react -D
- 运行
- 添加
.babelrc配置文件
{
"presets": ["@babel/preset-env","@babel/preset-react"], (stage-*已弃用)
"plugins": ["@babel/plugin-transform-runtime"]
}