解决babel安装时版本问题的坑

我们在使用JSX语法的时候需要安装babel，不然项目启动会报错

使用如下命令来安装babel插件，需要注意的是babel-loader需要指定版本为7.x，如果指定版本默认会下载最新版，是不兼容的。

1. 运行 npm i babel-core babel-loader@7.1.5 babel-plugin-transform-runtime -D
2. 运行 npm i babel-preset-env babel-preset-stage-0 babel-preset-react -D

然后webpack.config.js配置如下内容

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

在根目录下创建一个.babelrc文件，加入如下配置

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

然后通过npm run dev再启动项目就可以使用JSX语法了

如果项目还继续报错，可能是之前安装了babel-loader 需要先卸载再重新安装，具体操作如下：

1. 运行 npm uninstall babel-loader -D
2. 运行 npm install babel-loader@7.1.5 -D