书接上文，接下来项目将引入babel支持ES6+语法兼容。
Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。中文官网
0x00.babel概念
Babel 是一个编译器（输入源码 => 输出编译后的代码）。编译过程分为三个阶段：解析、转换和打印输出。
Babel 本身不具有任何转化功能，它把转化的功能都分解到一个个plugin 里面。因此当我们不配置任何插件时，经过 babel 的代码和输入是相同的。
插件(Plugins)
插件总共分为两种：语法插件(Syntax Plugins)和转译插件(Transform Plugins)。
- 转换插件用于转换你的代码。
- 语法插件只允许Babel解析(parse)特定类型的语法(而不是转换)。
转换插件会自动启用语法插件。因此，如果你已经使用了相应的转换插件，则不需要指定语法插件。
具体插件列表，详见官方文档。 Plugins
预设(Presets)
presets可以看作一组预先设定的插件列表集合，我们可以不必再当独地一个一个地去添加我们需要的插件。
配置文件
babel提供了config的方式，类似于webpack的cli方式以及config方式。官方文档
babel 7.X 之后，引入了babel.config.json (支持.js, .cjs, .mjs等文件格式);在7.X之前，项目都是基于.babelrc(支持.json,.js, .cjs, .mjs等文件格式)来进行配置。
一般babel.config.json会放置在根目录下，在执行编译时，babel会首先去寻找babel.config.json文件，以此来作为整个项目的根配置。
babel.config.json 配置示例
{
"presets": ["@babel/env"],
"plugins": ["transform-vue-jsx"]
}
插件的短名称
如果插件名称的前缀为 babel-plugin-，你还可以使用它的短名称：
{
"plugins": [
"myPlugin",
"babel-plugin-myPlugin" // 两个插件实际是同一个
]
}
适用于带有冠名（scope）的插件：
{
"plugins": [
"@org/babel-plugin-name",
"@org/name" // 两个插件实际是同一个
]
}
预设的短名称
如果 preset 名称的前缀为 babel-preset-，你还可以使用它的短名称：
{
"presets": [
"myPreset",
"babel-preset-myPreset" // equivalent
]
}
适用于带有冠名（scope）的 preset：
{
"presets": [
"@org/babel-preset-name",
"@org/name" // equivalent
]
}
执行顺序
- 插件执行顺序在presets之前
- 插件会按照声明的插件列表顺序顺序执行(first to last)
- preset会按照声明的列表顺序逆序执行(last to first)
参考
https://www.cnblogs.com/rynxiao/p/13665506.html
https://babeljs.io/docs/en/config-files
0x01.babel安装与配置
安装所需包（package）
项目中引入bable(babel 7.0 以后的插件与预设以@babel为前缀)。
@babel/cli 内置的 CLI 命令行工具，可通过命令行编译文件。官方文档
@babel/core babel的核心，包含各个核心的API，供babel插件和打包工具使用。官方文档
@babel/preset-env 是一个常用的预设(Presets), 让你能使用最新的JavaScript语法, 它会帮你转换成代码的目标运行环境支持的语法, 提升你的开发效率并让打包后的代码体积更小。相关参考
webpack loader 模块安装
JSX语法模块安装
JSX语法插件使用babel-plugin-syntax-jsx，没有使用高版本的@babel/plugin-syntax-jsx,项目运行中后者会出现 Cannot find module babel-plugin-syntax-jsx 异常。
功能验证
上述模块安装完毕后，在test目录下，创建一个名为babel-es6-test.js的文件
在命令行窗口输入以下指令，编译整个test文件夹并输出到lib(不存在则自动创建)文件夹中
成功运行后，项目lib目录下也会创建一个babel-es6-test.js的文件，跟test目录下的文件是相同的，代码没有进行转换。
Babel 本身不具有任何转化功能，不配置任何插件时，经过 babel 的代码和输入是相同的。
在根目录下创建babel.config.json文件，配置如下：
再次运行指令，lib下输出文件代码已经转换
项目配置
更新babel.config.json配置
webpack.config.js添加一条关于babel-loader的规则：
目录examples新增文件JSX.vue用来测试JSX语法
更新examples\App.vue文件，引入JSX.vue组件
运行npm run dev，打开浏览器，成功解析结果如下
最新目录结构
0x02.示例代码
Github Repo https://github.com/andurils/code-examples/tree/main/learning-element2/step01
