对 Babel 的配置项的作用不那么了解，是否会影响日常开发呢？老实说，大多情况下没有特别大的影响（毕竟有搜索引擎）。
不过呢，还是想更进一步了解下，于是最近认真阅读了 Babel 的文档，外加不断复制和粘贴，输出了本篇文章，为了更好的阅读体验，修修改改，最终算是以我个人比较喜欢的方式推进了每个知识点（每一个配置的引入都是有原因的），希望能够帮助你对 Babel 的各种配置有一个更清晰的认识 (已经很懂的小伙伴，无视本文) 。
Babel 是一个 JS 编译器
Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
我们先看看 Babel 能够做什么：
- 语法转换
- 通过 Polyfill 方式在目标环境中添加缺失的特性(@babel/polyfill模块)
- 源码转换(codemods)
本篇文章的目的是搞明白 Babel 的使用和配置，搞清楚 @babel/runtime，@babel/polyfill，@babel/plugin-transform-runtime 这些作用是什么，插件和预设都是用来干什么的，我们为什么需要配置它们，而不是讲如何进行 AST 转换，如果你对 AST 转换非常感兴趣，我找了这篇文章(看了就懂个大概了)，其中应用了大量的 AST 转换。
为了更清晰的了解每一步，首先创建一个新项目，例如 babelTemp(你爱取啥名取啥名)，使用
npm init -y
进行初始化，创建 src/index.js，文件内容如下（你也可以随便写点什么）:
const fn = () => {
console.log('a');
};
OK，创建好的项目先放在一边，先了解下理论知识:
核心库 @babel/core
Babel 的核心功能包含在 @babel/core 模块中。看到 core 这个词了吧，意味着核心，没有它，在 babel 的世界里注定寸步难行。不安装 @babel/core，无法使用 babel 进行编译。
CLI命令行工具 @babel/cli
babel 提供的命令行工具，主要是提供 babel 这个命令，适合安装在项目里。
@babel/node 提供了 babel-node 命令，但是 @babel/node 更适合全局安装，不适合安装在项目里。
npm install --save-dev @babel/core @babel/cli
现在你就可以在项目中使用 babel 进行编译啦（如果不安装 @babel/core，会报错噢）
将命令配置在 package.json 文件的 scripts 字段中:
//...
"scripts": {
"compiler": "babel src --out-dir lib --watch"
}
使用 (平时使用这个命令编译,npm run build,这里为了理解使用compiler )
npm run compiler
来执行编译，现在我们没有配置任何插件，编译前后的代码是完全一样的。
因为 Babel 虽然开箱即用，但是什么动作也不做，如果想要 Babel 做一些实际的工作，就需要为其添加插件( plugin )。
plugin(插件)
Babel 构建在插件之上，使用现有的或者自己编写的插件可以组成一个转换通道，Babel 的插件分为两种: 语法插件和转换插件 (背诵这两个)。
语法插件
这些插件只允许 Babel 解析（parse） 特定类型的语法（不是转换），可以在 AST 转换时使用(这篇文章帮你理解AST语法树)，以支持解析新语法，例如：
import * as babel from "@babel/core";
const code = babel.transformFromAstSync( ast, {
//支持可选链
plugins: ["@babel/plugin-proposal-optional-chaining"],
babelrc: false
}).code;
转换插件
转换插件会启用相应的语法插件(因此不需要同时指定这两种插件)，这点很容易理解，如果不启用相应的语法插件，意味着无法解析，连解析都不能解析，又何谈转换呢？
插件的使用
如果插件发布在 npm 上，可以直接填写插件的名称， Babel 会自动检查它是否已经被安装在 node_modules 目录下，在项目目录下新建 .babelrc 文件 (下文会具体介绍配置文件)，配置如下：
//.babelrc
{
"plugins": ["@babel/plugin-transform-arrow-functions"]
}
也可以指定插件的相对/绝对路径
{
"plugins": ["./node_modules/@babel/plugin-transform-arrow-functions"]
}
执行 npm run compiler，可以看到箭头函数已经被编译OK， lib/index.js 内容如下:
const fn = function () {
console.log('a');
};
