要想在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")
);
效果如下:
成功😊