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语法所需,所以我全部摘下来了,下载好后版本情况是这样的:
babel7.×版本配置问题_第1张图片

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

你可能感兴趣的:(一些遇到的小问题)