Babel 是一个 JavaScript 编译器,主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法
使用 Babel 可以：
- 进行语法转换
- 通过 Polyfill 方式在目标环境中添加缺失的功能（通过引入第三方 polyfill 模块）
- 进行源码转换（codemods）
Babel 在项目中很常见，也起着很重要的作用，在了解 React 中的 Babel 之前，先来看看 JSX 的渲染机制：
JSX 的渲染机制
JSX（JavaScript XML）是 Javascript 的一种语法拓展，表示在 JavaScript 中编写XML格式代码
React 中 JSX 渲染的过程：
-
第一次渲染：
JSX ------（编译）--------- Virtual DOM --------（渲染）--------- 真实DOM
-
后期渲染：
DOM-DIFF ------（计算）------ 渲染PATCH...
在 JSX 的底层处理机制中，第一步就是将 JSX 语法转换为虚拟 DOM，具体步骤为：
- 基于 babel-presets-react-app 将 JSX 编译为 React.createElement(...) 的形式
- 执行 createElement() 后创建出虚拟 DOM 对象
编译：
编译前的代码：
<>
<h3 style={{color: 'blue'}}>{title}</h3>
</>
编译后的形式：
React.createElement(React.Fragment, null,
React.createElement("h3", {
style: {
color: 'blue'
}
}, title)
);
在控制台打印上述代码，可以一看到运行之后的形式的就是虚拟 DOM 的形式：
关于 Babel
安装：
npm install babel-preset-react-app --save-dev
配置
安装了 balel 的项目，可以在 package.json 中可看到相关的配置：
或是在 .babelrc 文件中进行babel的配置，presets 表示预设 babel 的使用环境，plugins 表示一些扩展的插件
{
"presets": [
"react-app"
],
"plugins":...
}
webpack loader配置
module: {
rules: [{
test: /.jsx?$/,
use: 'babel-loader'
}]
}
在线编译
Babel官方 也为我们提供了在线编译，可以在线进行操作：
- target 表示浏览器兼容配置。
- 在 preset 中选中 react，可编译 react 的代码。
babel 将 前面的 JSX 编译后，得到下图的结构：
