1.babel是JS編譯器

babel的作用是高版本語法轉換成低版本語法。需要配合browserslistrc，如果說browserslistrc列舉的瀏覽器支援搞版本，則不用轉換。

2.babel有不少外掛，每個外掛的作用不一樣

2.1核心庫 @babel/core 是必不可少的。

2.2@babel/cli 提供babel命令。

按照傳統思維，一個ES6特性對應一個外掛，例如箭頭函式對應轉換外掛：plugin-transform-arrow-functions。如果多個特性那就要使用很多外掛？

通過預設可以解決輕鬆使用一組外掛。

2.3@babel/preset-env會根據你的目標環境，來自動生成外掛列表來編譯。

2.4 @babel/polyfill 解析新增的內建函式或者型別，如：Promise或者WeakMap之類。有個弊端就是需求全域性安裝，對提供給別人使用就可能由於環境而出錯。

2.5core-js@3，結合@babel/polyfill使用，只需要把用到的polyfill包含進來。配置如下：

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

2.6@babel/plugin-transform-runtime，是一個可以重複使用Babel注入的幫助程式，以節省程式碼大小的外掛，配合@babel/runtime使用

2.7@babel/runtime-corejs3 配合@babel/plugin-transform-runtime，@babel/runtime使用，解決@babel/polyfill使用必須是全域性引入檔案的缺點。配置如下：

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