Babel 是一個工具集，主要用于將 ES6 版本的 JS 代碼轉為 ES5 等向后兼容的 JS 代碼：

• 語法轉換（剪頭函數、async 語法、class、解構等）
• 補齊 API（Promise、Map、Symbol 等，Array.find 等實例新方法）

常用包：

npm install --save-dev
    babel-loader // 供 WebPack 轉碼的 loader
    @babel/cli   // 命令行轉碼工具，依賴 core
    @babel/core  // 核心 npm 包
    @babel/preset-env  // 提供了 ES6 轉換 ES5 的語法轉換規則
    @babel/polyfill

配置文件（babel.config.js、.babelrc、.babelrc.js 或直接配置在 package.json 中的 babel 下）：

module.exports = {
  // 預設，一組工具的集合
  presets: [
    // @babel/preset-env 的簡寫
    // ‘babel-preset-’可以不寫，‘@babel/preset-’不確定
    "@babel/env",
    "@babel/preset-react",
    "@babel/preset-typescript",
    ["@babel/需要參數的預設", { 參數: true }],
  ],
  // 插件
  plugins: [
    // babel-plugin-transform-decorators-legacy 的簡寫
    // ‘babel-plugin-’可以不寫。‘@babel/plugin-’不確定
    "transform-decorators-legacy",
  ],
};

• 插件比預設先執行
• 插件數組從前向后執行
• 預設數組從后向前執行

預設

• babel-preset-latest 是 Babel6 時代所有年代 preset 的集合（babel-preset-es2015、babel-preset-es2016、babel-preset-es2017），Babel7 下是 @babel/preset-env

• @babel/preset-typescript TS 支持

• @babel/preset-react、@babel/preset-flow react 支持

插件

• @babel/plugin-transform-runtime：復用 babel 注入的 helper 代碼

• 從 babel7.4 開始，官方不推薦再使用 @babel/polyfill 了，因為它本身其實就是兩個 npm 包的集合：core-js 與 regenerator-runtime。官方推薦直接使用這兩個 npm 包。預設 @babel/preset-env中已經包含了這兩個包

polyfill

• 單獨引入靜態的 polyfill.js

• 引入 @babel/polyfill，它 由 core-js@2.X 與 regenerator-runtime 組合而成。

• 引入 core-js/stable 和 regenerator-runtime/runtime ，需要 npm install --save core-js regenerator-runtime 此時裝的是 core-js@3.X，2.X 下沒有 stable。

@babel/preset-env 配置

1. browserslist

// package.json 或 .browserslistrc
"browserslist": [  // 指定代碼最終要運行環境
    "> 1%",        // 市場份額大于1%的瀏覽器
    "not ie <= 8"  // 不考慮IE8及以下
]

很多插件的配置是基于它的，比如 Autoprefixer、postcss 根據此自動增加 CSS 前綴。@babel/preset-env 在轉譯時也會讀取這個配置。

如果沒有此配置，Babel 會把所有 ES6 轉換 ES5

2. targets：同 browserslist 配置，優先級高于 browserslist

3. useBuiltIns：false | usage | entry。"false" 手動引入，會將 polyfill 全部引入到最終的代碼里。"entry" 手動引入，根據目標環境引入。"usage" 自動引入，根據實際用到的 API 針對性引入。

   module.exports = {
       presets: [["@babel/env", { useBuiltIns: "usage" }]],
       plugins: []
   }
   

   npm install --save-dev @babel/cli @babel/core  @babel/preset-env
   npm install --save @babel/polyfill
   

4. corejs：2 | 3 此項當 useBuiltIns 不為 false 時生效。取值為 3 時需要單獨安裝 core-js@3

5. modules：auto | amd | umd | systemjs | commonjs | cjs | false 是否把 ES6 的模塊化語法改成其它模塊化語法。ES6 模塊方便 Webpack 進行靜態分析（如 tree shaking 優化）

@babel/runtime 和 @babel/plugin-transform-runtime

@babel/runtime 用于把輔助函數們（polyfill 自己定義的 Promise 等）統一放入一個包里，以達到復用、減小最終包大小的目的。

@babel/plugin-transform-runtime：將最終包中的輔助函數們替換為 @babel/runtime 的統一包（打包后的引用地址為@babel/runtime/helpers/XXX）

npm install --save @babel/runtime
npm install --save-dev @babel/plugin-transform-runtime

// babel.config.js
{
    "presets": [
      "@babel/env"
    ],
    "plugins": [
      "@babel/plugin-transform-runtime"
    ]
}

@babel/plugin-transform-runtime 的第二個作用是**防止環境污染**：babel-polyfill 或 core-js/stable 與 regenerator-runtime/runtime 補齊 API 的方式是全局重新定義，環境原始的 API 會被覆蓋掉，稱為環境污染。此插件可以重命名 API，且不需要全局引入。

使用此插件不再需要 babel-polyfill 或 core-js/stable 與 regenerator-runtime/runtime。

npm install --save @babel/runtime-corejs3
npm install --save-dev @babel/plugin-transform-runtime

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

@babel/plugin-transform-runtime 的完整/默認配置：

    "plugins": [
      [
        "@babel/plugin-transform-runtime",
        {
          "helpers": true,          // 自動引入輔助函數包
          "corejs": false,                  // API轉換以避免污染全局環境
          "regenerator": true,          // Generator與async轉換API代碼
          "useESModules": false,        // 是否使用ES6的模塊化用法
          "absoluteRuntime": false,
          "version": "7.0.0-beta.0"
        }
      ]
    ]

關于版本，工具集圍繞 core 主包的版本號變化。包名為@babel/XX 的為 Babel7，包名為 babel-XX 的為 Babel6

參考： https://zhuanlan.zhihu.com/p/394781295