react 进行babel转化jsx运行之后报错

在进行react的项目搭建的过程中，搭建到babel转化jsx语法，然后就爆了如下的各种错误：

比如：

终端运行：cnpm i babel-core babel-loader babel-plugin-transform-runtime  -D

    cnpm i babel-preset-env babel-preset-stage-0 babel-preset-react -D

之后运行npm run dev

大体查询到的原因是babel-loader要使用7.几版本的，我终端运行上面命令的时候装的是8.几版本的，删除原本的babel-loader又报错，，

在解决这个问题的过程中爆出了各种错误，，，心很累啊；；；；

之前写过react的项目，在之前的react的项目用了yarn托管，所以尝试一了一把，用yarn装指定版本的babel-loader，在查询关于这个错误的时候貌似要用到@babel/core，所以顺手装了一个；

解决方式如下：

在搭建了基本的react项目之后，先装yarn ,命令是：npm install yarn -g

然后用yarn装@babel/core： yarn add @babel/core --dev

之后再装所需要的，我装了这些：

yarn add [email protected]

yarn add babel-plugin-transform-runtime

yarn add babel-preset-env babel-preset-stage-0 babel-preset-react

yarn add babel-core

在项目根目录新建.babelrc文件夹，写入：

{
    "presets": [
        "env",
        "stage-0",
        "react"
    ],
    "plugins": [
        "transform-runtime"
    ]
}

在webpack.config.js中写入：

module: {
        //所有第三方 模块匹配规则
        rules: [
            { test: /\.js|jsx?$/, use: 'babel-loader', exclude: /node_modules/ },
        ]
    }

 

装上这些项目运行无误了；