babel

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：

webpacl.config.js

方法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，得到编译结果：

index.compiled.js

可以看到，编译结果中有一个_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，可以用来指定引用运行时的版本。

image.png

目前有三个版本：

• @babel/runtime，对用的选项是corejs: false
• @babel/runtime-corejs2，对用的选项是corejs: 2
• @babel/runtime-corejs3，对用的选项是corejs: 3

引用不同的版本的rumtime，自然需要对应rumtime包 image.png

方法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支持的。使用：

image.png image.png

其原理很简单，引入register后，会为nodejs的模块加载函数require()，增加一个钩子函数，会在被加载的代码执行之前，用babel转译成es5，然后再执行。

typescript

babel中转译typescript十分方便，只需添加一个plugin，@babel/preset-typescript即可。