Babel 是什么？
Babel 是一个 JavaScript 编译器
Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情：
- 语法转换
- 通过 Polyfill 方式在目标环境中添加缺失的特性（通过第三方 polyfill 模块，例如 core-js，实现）
- 源码转换 (codemods)
配置 Babel
.babelrc和babel.config.js 都是Babel的配置文件
babel 7.x 以上开始支持两种类型的配置文件, 分别是.babelrc 和 babel.config.js
babel.config.js是在babel第7版引入的，主要是为了解决babel6中的一些问题
- .babelrc会在一些情况下，莫名地应用在node_modules中
- .babelrc的配置不能应用在使用符号链接引用进来的文件
- 在node_modules中的.babelrc会被检测到，即使它们中的插件和预设通常没有安装，也可能在Babel编译文件的版本中无效
并且支持的文件扩展名：
Babel 可以使用 Node.js 原生支持的任何文件扩展名进行配置：您可以使用.json、 .js、.cjs和.mjs， forbabel.config.json和.babelrc.jsonfiles。
推荐使用场景：
- babel.config.json
- 你正在使用一个monorepo（可以理解为在一个项目中会有多个子工程）
- 你希望编译node_modules以及symobllinked-project中的代码
*.babelrc - 你的配置仅适用于项目的单个部分
- 需要在子目录/文件中运行一些特定的转换，比如你可能不希望一些第三方库被转码
- 综合推荐使用babel.config.json，Babel itself is using it
配置文件 .babelrc
使用 Babel 第一步就是配置此文件，放在项目根目录，此文件用于配置转码规则和插件，基本格式：
{
"presets":[],
"plugins":[]
}
预设（Presets)
Babel 的预设（preset）可以被看作是一组 Babel 插件和/或 options 配置的可共享模块。
创建预设
如需创建一个自己的预设（无论是为了本地使用还是发布到 npm），需要导出（export）一个配置对象
可以是返回一个插件数组...
module.exports = function() {
return {
plugins: ["pluginA", "pluginB", "pluginC"],
};
};
preset 可以包含其他的 preset，以及带有参数的插件。
module.exports = () => ({
presets: [require("@babel/preset-env")],
plugins: [
[require("@babel/plugin-proposal-class-properties"), { loose: true }],
require("@babel/plugin-proposal-object-rest-spread"),
],
});
预设的排列顺序
Preset 是逆序排列的（从后往前）。
{
"presets": ["a", "b", "c"]
}
将按如下顺序执行： c、b 然后是 a。
这主要是为了确保向后兼容，由于大多数用户将 "es2015" 放在 "stage-0" 之前。
预设的参数
插件和 preset 都可以接受参数，参数由插件名和参数对象组成一个数组，可以在配置文件中设置。
如果不指定参数，下面这几种形式都是一样的：
{
"presets": [
"presetA", // bare string
["presetA"], // wrapped in array
["presetA", {}] // 2nd argument is an empty options object
]
}
要指定参数，请传递一个以参数名作为键（key）的对象。
{
"presets": [
[
"@babel/preset-env",
{
"loose": true,
"modules": false
}
]
]
}
插件(plugins)
Babel 的代码转换是通过将插件（或预设）应用到您的配置文件来启用的。
使用插件
如果插件在npm 上，你可以传入插件的名称，Babel 会检查它是否安装在node_modules. 这被添加到plugins配置选项，它采用一个数组。
{
"plugins": ["babel-plugin-myPlugin", "@babel/plugin-transform-runtime"]
}
您还可以指定插件的相对/绝对路径。
{
"plugins": ["./node_modules/asdf/plugin"]
}
插件顺序
这意味着如果两个转换插件都将处理“程序（Program）”的某个代码片段，则将根据转换插件或 预设(preset) 的排列顺序依次执行。
- 插件在 预设(preset) 前运行。
- 插件顺序从前往后排列。
{
"plugins": ["transform-decorators-legacy", "transform-class-properties"]
}
先执行 transform-decorators-legacy ，在执行 transform-class-properties
** 插件参数**
参数由插件名和参数对象组成一个数组，可以在配置文件中设置。
如果不指定参数，下面这几种形式都是一样的：
{
"plugins": ["pluginA", ["pluginA"], ["pluginA", {}]]
}
要指定参数，请传递一个以参数名作为键（key）的对象。
{
"plugins": [
[
"transform-async-to-module-method",
{
"module": "bluebird",
"method": "coroutine"
}
]
]
}
补充
1.语法转译器
@babel/preset-env 转译包
主要对 JavaScript 最新的语法糖进行编译，并不负责转译新增的 API 和全局对象。
而 Promise,Iterator,Generator,Set,Maps,Proxy,Symbol 等全局对象，以及一些定义在全局对象的方法（比如 includes/Object.assign 等）并不能被编译。
官方推荐使用，包含了所有现代js（es2015 es2016等）的所有新特性，你也可以传递一些配置给env，精准实现你想要的编译效果。
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "entry"
}
]
]
}
参数：
-
targets https://www.babeljs.cn/docs/babel-preset-env#targets
string | Array<string> | { [string]: string },targets如果在@babel/preset-env的文档中没有指定与浏览器列表相关的选项，则默认为顶级选项，否则为{}
描述您的项目支持/目标的环境。
{
"targets": "> 0.25%, not dead"
}
-
modules
"amd" | "umd" | "systemjs" | "commonjs" | "cjs" | "auto" | false，默认为"auto"。
启用 ES 模块语法到另一种模块类型的转换。请注意，这cjs只是commonjs.
将此设置为false将保留 ES 模块。仅当您打算将本机 ES 模块发送到浏览器时才使用此选项。如果您在 Babel 中使用捆绑器，modules: "auto"则始终首选默认值。
include
Array<string|RegExp>，默认为[]
始终包含的一系列插件。exclude
Array<string|RegExp>，默认为[]。
要始终排除/删除的一系列插件。useBuiltIns
"usage"| "entry"| false，默认为false。
此选项配置如何@babel/preset-env处理 polyfill。
当使用usage或entry选项时，@babel/preset-env会将对core-js模块的直接引用添加as bare imports (or requires)。这意味着core-js将相对于文件本身进行解析并且需要可访问。
由于@babel/polyfill已在 7.4.0 中弃用，我们建议直接core-js通过corejs选项添加和设置版本。
corejs
string或{ version: string, proposals: boolean }，默认为"2.0"。该version字符串可以是任何受支持的core-js版本。例如，"3.8"或"2.0"。configPath
string, 默认为process.cwd()
开始对 browserslist 进行配置搜索的起点，并上升到系统根目录直到找到。
2.API 和全局对象转译器
负责转译新增的 API 和全局对象，保证在浏览器的兼容性。比如Promise,Iterator,Generator,Set,Maps,Proxy,Symbol 等全局对象，以及一些定义在全局对象的方法（比如 includes/Object.assign 等）具体可查询https://github.com/babel/babel/blob/master/packages/babel-plugin-transform-runtime/src/definitions.js
babel polyfill
相当于一个垫片，可以转译所有 ES6 API 和全局对象。
缺点：增加包体，比如仅是使用到一种 ES6 新增 API，他也会增加所有的转移语法。
3.jsx,flow,TypeScript 等插件转译器
@babel/preset-react
当你使用 react 项目时，需要使用此包配合转译
安装：npm install --save-dev @babel/preset-react
引用：在 .babelrc 中添加配置
"presets": ["@babel/preset-react"]
@babel/preset-typescript
当你项目是用 TypeScript 编写时，需要使用此包配合转译
安装：npm install --save-dev @babel/preset-typescript
引用：在 .babelrc 中添加配置
"presets": ["@babel/preset-typescript"]
参考：
https://www.babeljs.cn/docs/configuration
https://blog.csdn.net/weixin_45151873/article/details/118572216
https://zhuanlan.zhihu.com/p/84083454
