Babel是什么
Babel是一个工具链，主要用于在当前和较旧的浏览器或环境中将ECMAScript 2015+代码转换为向后兼容的JavaScript版本。核心是一个Compiler（编译器）。
Compiler(编译器)是什么
这里可以简单理解为把源码转化成生产便用的代码。
babel涉及到相关常用的包的作用是：
@babel/parser -> 解析(Parsing)
Babel plugins -> 转换(Transformation)
@babel/generator -> 代码生成(Code Generation)
@Babel/core -> @babel/parser + @babel/generator
babel -> @Babel/core + plugins = Compiler
Compiler = 解析(Parsing) + 转换(Transformation) + 代码生成(Code Generation);
Babel = @babel/parser + Babel Plugins + @babel/generator
plugins为什么没有直接集成到 babel里面
因为每个plugin独立负责转义单一个的语法，所以需要配置很多plugin，且不同的源码需要的plugin不一样。 这里就需要根据项目去配置对应的plugin。
手动去配置plugin很麻烦，这里可以直接借助presets的能力。presets是预设的一批plugin或者配置集合。
Plugins与presets执行顺序:
- Plugins比presets先执行
- Plugin的执行顺序是按照数组中的顺序依次执行。
- Preset的执行顺序是按照数组中的倒序依次执行。
注意：顺序会影响每个plugin中的visitor
官方 Presets
- @babel/preset-env 编译ES2015+的语法
- @babel/preset-typescript 编译TypeScript语法
- @babel/preset-react 编译React语法
- @babel/preset-flow 编译Flow语法
Babel实现代码向后兼容的两种方式
方式1：转换语法 (Transform syntax):
比如：let、const转成var；箭头函数转成普通函数。这种无法通过定义的方式去实现的语法规则会进行语法转化。
方式2：兼容API:
比如：Promise , Array.from , Array.prototype.includes 这类可以通过自定义函数的方式去支持。这就涉及到了pollyfill。
@babel/plugin-transform-runtime
涉及到pollyfill的时候，如果我们提供给别人的sdk做了pollyfill，pollyfill是影响全局的。如果别人的项目也有pollyfill，而且是自定义的pollyfill，与我们的有冲突，这时候就有问题了。
这时候就用到了@babel/plugin-transform-runtime @babel/runtime-corejs3 。使用这个插件就能使pollyfill只在当前模块生效，不会影响全局的方法或属性。
