今天我們將會介紹剩下的幾個babel常用套件

babel-runtime 和babel-plugin-transform-runtime

我們時常在項目中看到.babelrc中使用babel-plugin-transform-runtime，
而package.json中的dependencies(注意不是devDependencies)又包含了babel-runtime
，那這兩個設定又起了什麼作用呢？

• babel-runtime 在使用babel-plugin-transform-runtime的時候必須把babel-runtime當做依賴。
  而babel-runtime它內部集成了

  1. core-js:轉換一些內置類( Promise, Symbols等等)和靜態方法( Array.from等)。絕大部分轉換是這裡做的。自動引入。
  2. regenerator:作為core-js的拾遺補漏，主要是generator/yield和async/await兩組的支持。當代碼中有使用generators/async時自動引入。
  3. helpers,如上面的asyncToGenerator就是其中之一，其他還有如jsx, classCallCheck等等，可以查看babel-helpers。在代碼中有內置的helpers使用時(如上面的第一段代碼)移除定義，並插入引用(於是就變成了第二段代碼)。

• babel-plugin-transform-runtime 不支持實例方法(例如[1,2,3].includes(1))

1. 安裝方式

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

和 babel/runtime生產相關性（因為它是針對“運行時”的）。

npm install --save @babel/runtime

轉換插件通常僅在開發中使用，但是運行時本身將取決於部署的代碼。有關更多詳細信息，請參見下面的示例。

2. 用法（官方推薦4種用法這裡主要介紹兩個個人常用的）

//範例

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

//範例

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false,
        "version": "7.0.0-beta.0"
      }
    ]
  ]
}

• corejs

  • 可以輸入false，2，3或{ version: 2 | 3, proposals: boolean }，默認為false。
    分別對應 npm install --save @babel/runtime, npm install --save @babel/runtime-corejs2,npm install --save @babel/runtime-corejs3
  • 此選項需要更改用於提供必要的運行時幫助程序的依賴項

• helpers

  • boolean默認為false
  • 跟內建模組調用有關，詳細可以看(https://babeljs.io/docs/en/babel-plugin-transform-runtime#helper-aliasing)

• polyfill

  • babel 7已經刪除，bj4

• regenerator

  • boolean默認為false
  • 是否將 generator functions以不污染全局範圍的再生器運行。

• useBuiltIns

  • babel 7已經刪除，bj4

• useESModules

  • boolean默認為false
  • 啟用後，轉換將使用不運行的助手 @babel/plugin-transform-modules-commonjs。這允許在像webpack這樣的模塊系統中進行較小的構建，因為它不需要保留commonjs語義。

• absoluteRuntime

  • boolean or string默認為false
  • 官方解釋 : 這使用戶可以transform-runtime在整個項目中廣泛運行。默認情況下，
    直接transform-runtime從中導入@babel/runtime/foo，但是僅@babel/runtime在node_modules要編譯的文件的中有效。
    node_modules在其他情況下，這對於嵌套，npm鏈接的模塊或駐留在用戶項目外部的CLI 可能會造成問題。
    為避免擔心如何解析運行時模塊的位置，這使用戶可以預先解析運行時，然後將運行時的絕對路徑插入輸出代碼中。
  • 小弟我解釋:主要用編譯檔案中馬上執行時會用到。

• version

  • 默認情況下，transform-runtime假定@babel/runtime@7.0.0已安裝。如果您安裝了更高版本的@babel/runtime（或與之對應的corejs對應版本 @babel/runtime-corejs3）
    或作為依賴項列出，則transform-runtime可以使用更多高級功能。例如，如果您依賴@babel/runtime-corejs2@7.7.4可以使用

  {
    "plugins": [
      [
        "@babel/plugin-transform-runtime",
        {
          "absoluteRuntime": false,
          "corejs": 2,
          "version": "^7.7.4"
        }
      ]
    ]
  }
  

babel-loader

通常會這樣下載 npm install -D babel-loader @babel/core @babel/preset-env webpack

前面提過babel的三種使用方法，並且已經介紹過了babel-cli。但一些大型的項目都會有構建工具(如webpack或rollup)來進行代碼構建和壓縮(uglify)。理論上來說，我們也可以對壓縮後的代碼進行babel處理，但那會非常慢。因此如果在uglify之前就加入babel處理，豈不完美？
所以就有了babel插入到構建工具內部這樣的需求。以(我還算熟悉的) webpack為例，webpack有loader的概念，因此就出現了babel-loader。
-cli一樣，babel-loader也會讀取.babelrc或者package.json中的babel段作為自己的配置，之後的內核處理也是相同。唯一比babel-cli複雜的是，它需要和webpack交互，因此需要在webpack這邊進行配置。

總結

今天的把剩下babel稍微整理了一下，明天會詳細寫說webpack + babel-loader 基礎用法

參考文件

• babel官方(https://babeljs.io/docs/en/)
• 阮一峰 Babel-入门教程(https://www.ruanyifeng.com/blog/2016/01/babel.html)
• 小蘑菇哥哥 一口(很長的)氣了解babel (https://juejin.im/post/6844903743121522701#heading-1)