react jsx babel环境配置

首先我们为什么要对一个react环境进行babel配置呢？

 react项目中如果不借助脚手架我们要写入一个HTML的话，方法是

import React from 'react'
import ReactDom  from 'react-dom'
const mySpan = React.createElement('span',null, '这厮一个text文本')
const div = React.createElement('div', {id: '111'}, mySpan,'这是一个div元素')
ReactDom.render(div,document.getElementById('app'))

这个时候如果我们要实现HTML复杂的嵌套关系的话，其实是非常困难的，所以我们采用了jsx的写法

第二个问题 ： 什么是jsx？，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面

常见的jsx的写法是 

const myDiv  = 
这是一个常见的jsx格式

这个时候问题来了，等号右面是一段HTML标记语言，放在js中只会报错，所以在react中我们需要一个loader来解决这个问题的

这个loader就是我们的babel-loader 

现在就让我们来配置下这个babel-loader吧

首先我们需要安装babel和babel的一些插件

 1.npm install -D  @babel/core @babel/preset-env @babel/preset-react babel-loader @babek/plugin-transform-runtime

@babel/core 核心包

@babel/preset-env 解析es的包,智能识别当前运行环境并进行转换

@babel/preset-react 解析jsx的包

@babael/plugin-transform-runtime 使es6中的api类似generator,promise对象等生效
 

2.对webpack.config.js 中的module进行配置

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

 这个东西我在配置的时候有点坑就是babel升级到7.x之后那些插件和模块的写法都变成了@babel/的写法了，并且废除了babel-preset-stage-0，具体的坑可以看下这篇文章

https://www.jb51.net/article/161089.htm