babel的工作流：
parsing 将es6代码编译为AST
transforming 调用转化插件，将AST编译成es5代码对应的AST
generating 根据es5的AST，生成es5代码
@babel/core
提供核心编译的功能，如：
-
transform() 可将es6代码编译成es5代码
此方法会自动寻找根目录下的babel.config.json文件作为配置项。
image.png
此处转化后的代码和原来的代码并没有区别，是因为没有用插件，只要使用了对应的插件，就会有效果：
image.png -
parse() 可将es6代码编译成es5的AST
image.png
@babel/cli
提供命令行调用core进行编译的方式
插件
前面已经见识过插件，只要使用了插件，自然会产生对应的结果。实际上插件分两类，一类是转化插件，一类是语法插件，转化插件会自动去调用对应的语法插件。
插件可以使用短名称、插件可以传参，具体写法不展开。
预设
预设是一系列插件的集合。预设可以使用短名称、可以传参，具体写法不展开。
插件的顺序启用顺序是：先插件，后预设。插件由前到后，预设由后到前，如：
{
"presets": [
"presetA",
"presetB"
],
"plugins": [
"plugin1",
"plugin2"
]
}
plugin1 > plugin2 > presetB内部的插件 > presetA内部的插件
@babel/polyfill
babel中，如何使用polyfill是最绕的部分，主要是几个runtime让人搞不清楚。
方法1：
直接在入口文件中import:
方法2：
与方法1类似，在打包工具的入口中指定polyfill，如使用webpack：
方法3：
使用@babel/plugin-transform-runtime插件
安装：npm i @babel/plugin-transform-runtime -D
使用此插件，还需要 npm i @babel/runtime -S
原理：
先来尝试用babel编译一段代码
步骤1，新建一个新的工程，创建index.js，输入下面的代码
// index.js es6代码
class Human {}
步骤2，安装@babel/core @babel/preset-env @babel/cli
npm i @babel/core @babel/preset-env @babel/cli -D
步骤3，根目录下创建babel.config.json
// babel.config.json
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage"
}
]
]
}
步骤4，在package.json中加入脚本：
// package.json
"scripts": {
"babel": "babel src/index.js -o dist/index.compiled.js"
}
步骤5，执行脚本，npm run babel，得到编译结果：
可以看到，编译结果中有一个_classCallCheck函数。像_classCallCheck这种，编译结果中需要的内容，这就是编译结果中依赖的 运行时（runtime）。
@babel/runtime这个包，就提供了这些运行时。比如@babel/runtime/helpers/classCallCheck就提供了上面用到的_classCallCheck函数。
@babel/plugin-transform-runtime的作用就是，在编译结果中，从@babel/runtime中引用这些运行时
来看看@babel/plugin-transform-runtime使用效果：
总结一下，原理就是：
@babel/runtime 提供了编译结果的运行时
@babel/plugin-transform-runtime 在编译结果中，从@babel/runtime中引用这些运行时。
@babel/plugin-transform-runtime 有个选项corejs，可以用来指定引用运行时的版本。
目前有三个版本：
- @babel/runtime，对用的选项是
corejs: false - @babel/runtime-corejs2，对用的选项是
corejs: 2 - @babel/runtime-corejs3，对用的选项是
corejs: 3
方法4：
通过@babel/preset-env的配置项 useBuiltIns，其默认值是false
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage"
}
]
]
}
@babel/register
nodejs对并不完全支持es6，比如，不能在node中直接使用 class关键字，至少我现在用的v10.15.3不支持class。@babel/register就是提高node对es6支持的。使用：
其原理很简单，引入register后，会为nodejs的模块加载函数require()，增加一个钩子函数，会在被加载的代码执行之前，用babel转译成es5，然后再执行。
typescript
babel中转译typescript十分方便，只需添加一个plugin，@babel/preset-typescript即可。
