关于babel的几点小结

1.babel是JS编译器

babel的作用是高版本语法转换成低版本语法。需要配合browserslistrc，如果说browserslistrc列举的浏览器支持高版本的语法，则不用转换。

2.babel有不少插件，每个插件的作用不一样

2.1 核心库 @babel/core 是必不可少的，它是其他插件的基础。

2.2 @babel/cli  提供babel命令。

按照传统思维，一个ES6特性对应一个插件，例如箭头函数对应转换插件：plugin-transform-arrow-functions。如果多个特性那就要使用很多插件？显然开发过程中那是很困难的，

babel通过预设可以解决轻松使用一组插件的弊端，预设插件@babel/preset-env，@babel/preset-env会根据你的目标环境，来自动生成插件列表来编译。

2.3 @babel/polyfill 解析新增的内置函数或者类型，如：Promise或者WeakMap之类。有个弊端就是需要全局安装，如果对提供给别人库，就可能由于两者环境不同而出错。

2.4 core-js@3，结合 @babel/polyfill使用，只需要把用到的polyfill 包含进来。配置如下：

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

2.5 @babel/plugin-transform-runtime、@babel/runtime-corejs3 。

两者可以重复使用 Babel 注入的帮助程序，它把每个文件需要用到的babel插件以引用的方式注入到文件中，节省业务代码。配置如下：

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