react项目配置babel编译jsx

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并没有被读取或者是其他原因。