Babel

refer：
前端工程师的自我修养-关于 Babel 那些事儿

什么是Babel:

JavaScript 编译器，用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前版本和旧版本的浏览器或其他环境中。简单来说 Babel 的工作就是：

• 语法转换
• 通过 Polyfill 的方式在目标环境中添加缺失的特性
• JS 源码转换

注： Babel 只负责编译新标准引入的新语法，比如 Arrow function、Class、ES Module 等，它不会编译原生对象新引入的方法和 API，比如 Array.includes，Map，Set 等，这些需要通过 Polyfill 来解决。

基本原理:

AST (抽象语法树)

使用:

1. babel/cli
2. babel/core
3. 配置文件 babel.config.js / .babelrc / .babelrc.js / package.json

// package.json
{
 ...
 "babel": {
   "presets": [ ... ],
   "plugins": [ ... ],
 }
}

3.1 插件(Plugins)
插件是用来定义如何转换代码。在预设(Presets) 前按照从左往右的顺序执行。

3.2 预设（Presets）
预设就是一堆插件(Plugin)的组合，从而达到某种转译的能力，就比如 react 中使用到的 @babel/preset-react ，它就是下面几种插件的组合。

@babel/plugin-syntax-jsx
@babel/plugin-transform-react-jsx
@babel/plugin-transform-react-display-name

当然我们也可以手动的在 plugins 中配置一系列的 plugin 来达到目的。但是这样一方面显得不那么优雅，另一方面增加了使用者的使用难度。如果直接使用预设就清新脱俗多了~
为了确保向后兼容，预设的执行顺序是从右往左。

Polyfill:

polyfill 的翻译过来就是垫片，垫片就是垫平不同浏览器环境的差异，让大家都一样。
在 @babel/preset-env 的配置项中提供了 useBuiltIns 这一参数，只要在使用 @babel/preset-env 的时候带上他，Babel 在编译的时候就会自动进行 Polyfill ，不再需要手动的在代码中引入@babel/polyfill 了，同时还能做到按需加载。

{
  "presets": [
    "@babel/preset-flow",
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "8.10"
        },
        // 需要配置一下 corejs 的版本号，不配置编译的时候会报警告
        "corejs": "3", // 声明 corejs 版本
        "useBuiltIns": "usage"
      }
    ]
  ]
}

seBuiltIns 的机构参数：

• false：此时不对Polyfill 做操作，如果引入 @babel/polyfill 则不会按需加载，会将所有代码引入
• usage：会根据配置的浏览器兼容性，以及你代码中使用到的 API 来进行 Polyfill ，实现按需加载
• entry：会根据配置的浏览器兼容性，以及你代码中使用到的 API 来进行 Polyfill ，实现按需加载，不过需要在入口文件中手动加上import ' @babel/polyfill'

Babel 在编译中使用的辅助函数:

@babel/plugin-transform-runtime 可以让 Babel 在编译中复用辅助函数，从而减小打包文件体积。

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "useBuiltIns": "usage",
                "corejs": 3
            }
        ]
    ],
    "plugins": [
       "@babel/plugin-transform-runtime"
    ]
}