安裝配置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")
);

效果如下：

成功😊