react项目配置babel编译jsx

最新推荐文章于 2025-03-20 15:51:01 发布

VanhomPeng

最新推荐文章于 2025-03-20 15:51:01 发布

阅读量2.1k

点赞数

文章标签： babel react

本文链接：https://blog.csdn.net/qq_37314372/article/details/107322583

版权

本文介绍了在react项目中配置babel编译jsx时遇到的问题及解决方法。在从零搭建的react项目中，使用webPack4和babel-loader8，配置过程中出现错误提示需添加@babel/preset-react。尝试在.babelrc中配置未成功，最后发现将presets配置在webpack.config.js中解决了问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react项目配置babel编译jsx

摘要

从零搭建react项目，webPack4+babel-loader8

配置须知

babel-loader7.x 要与 babel6.x 结合使用
babel-loader8.x 要与 babel7.x 结合使用
这里以babel-loader8.x为例，使用npm 进行如下安装：

npm i @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/plugin-transform-runtime -D

看教程上说安装完成以后要在项目根目录新建一个文件 .babelrc 来配置babel
配置如下：

{
	"presets": [
  		"@babel/preset-env",
  		"@babel/preset-react"
	],
	"plugins": [
    	"@babel/plugin-transform-runtime"
	]
}

我配置完成以后进行编译，就报错说让我添加@babel/preset-react到presets中，对jsx语法的支持还没有启用，但是我明明已经添加了。
最终经过无数次百度与尝试，找到了解决办法：

module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options:{
                    "presets": ["@babel/preset-react", "@babel/preset-env"],
                    "plugins": ["@babel/plugin-transform-runtime"]
                }
            },
        }]
    },

将presets直接配置在了webpack.config.js中，再次执行build就成功了。

问题分析：感觉是项目中配置的.babelrc并没有被读取或者是其他原因。