版本问题导致的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.×版本肯定是会冲突的。所以还是得多看官方文档才行。