解決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