我们在使用JSX语法的时候需要安装babel,不然项目启动会报错
使用如下命令来安装babel插件,需要注意的是babel-loader需要指定版本为7.x,如果指定版本默认会下载最新版,是不兼容的。
- 运行 npm i babel-core babel-loader@7.1.5 babel-plugin-transform-runtime -D
- 运行 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 需要先卸载再重新安装,具体操作如下:
- 运行 npm uninstall babel-loader -D
- 运行 npm install babel-loader@7.1.5 -D