安装配置babel

要想在React项目中启用JSX语法，需要配置babel。babel是一个JavaScript编译器。

安装配置babel

装包

cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-preset-stage-0 babel-preset-react -D

这里其实埋了个小坑，在配置完之后打包会失败，显示babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@ 7'.。很明显是因为babel-core与babel-loader版本不兼容造成的。按照提示我们安装babel-loader 7：

cnpm i babel-loader@7 -D

这之后项目中会用babel-loader 7覆盖之前的babel-loader 8。因此，建议一开始在安装babel-loader的时候就指定版本号。

配置

• 在webpack.config.js中配置babel-loader来处理指定格式的文件，下面直接给出该配置文件：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlPlugin = new HtmlWebpackPlugin({
    template: path.join(__dirname, "./src/index.html"),
    filename: "index.html"
});

module.exports = {
    mode: "development",
    // mode: "production"
    plugins: [
        htmlPlugin
    ],
    module: {
        rules: [
            {
                test: /\.js|jsx$/,
                use: "babel-loader",
                exclude: /node_modules/
            }
        ]
    }
};

• 在根目录下新建.babelrc文件，在其中指定语法和插件，下面直接给出该配置文件：

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

使用JSX语法

index.js：

import React from "react"
import ReactDOM from "react-dom"

// 使用JSX语法
const mydiv = <div>这是一个div</div>;

ReactDOM.render(
    mydiv,
    document.getElementById("app")
);

效果如下：

成功😊