部落格：姜瑞濤的官方網站
原文連結：https://www.jiangruitao.com/docs/babel/deep/babel-plugin-transform-runtime-3/
版權採用《署名-非商業性使用-禁止演繹 4.0 國際》許可協議 轉載需註明原文作者、連結與版權協議

本節我們來講一下@babel/plugin-transform-runtime的配置項，可能會有點小枯燥，不過對你理解其使用很有幫助。

@babel/plugin-transform-runtime是否要開啟某功能，都是在配置項裡設定的，某些配置項的設定是需要安裝npm包的。

@babel/plugin-transform-runtime在沒有設定配置項的時候，其配置項引數取預設值。下面的兩個配置作用是等效的。

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

  // 是上方的預設值
  { 
    "plugins": [
      [
        "@babel/plugin-transform-runtime",
        {
          "helpers": true,
          "corejs": false,
          "regenerator": true,
          "useESModules": false,
          "absoluteRuntime": false,
          "version": "7.0.0-beta.0"
        }
      ]
    ]
  }
 

配置項講解

1.我們先看第一個配置項helpers

該項是用來設定是否要自動引入輔助函式包，這個我們當然要引入了，這是@babel/plugin-transform-runtime的核心用途。該項取值是布林值，我們設定為true，其預設值也是true，所以也可以省略不填。

2.接著來看corejs和regenerator

這兩項是用來設定是否做API轉換以避免汙染全域性環境，regenerator取值是布林值，corejs取值是false、2和3。這個上一節已經講過了，在前端業務專案裡，我們一般對corejs取false，即不對Promise這一類的API進行轉換。而在開發JS庫的時候設定為2或3。regenerator取預設的true就可以

3.useESModules

該項用來設定是否使用ES6的模組化用法，取值是布林值。預設是fasle，在用webpack一類的打包工具的時候，我們可以設定為true，以便做靜態分析。

4.absoluteRuntime

該項用來自定義@babel/plugin-transform-runtime引入@babel/runtime/模組的路徑規則，取值是布林值或字串。沒有特殊需求，我們不需要修改，保持預設false即可。

5.最後一項version

該項主要是和@babel/runtime及其進化版@babel/runtime-corejs2、@babel/runtime-corejs3的版本號有關係，這三個包我們只需要根據需要安裝一個。我們把安裝的npm包的版本號設定給version即可。例如，在上節的babel14例子裡，安裝的@babel/runtime-corejs3版本是^{7.10.4，那麼配置項version也取'}7.10.4'。
其實該項不填取預設值就行，目前填寫版本號主要是可以減少打包體積。

另外，在Babel6版本，該外掛還有兩個配置選項polyfill和useBuiltIns，在v7版本已經移除了，大家不需要再使用。

小結：

1.要使用@babel/plugin-transform-runtime外掛，其實只有一個npm包是必須要裝的，那就是它自己@babel/plugin-transform-runtime。
對於@babel/runtime及其進化版@babel/runtime-corejs2、@babel/runtime-corejs3，我們只需要根據自己的需要安裝一個。

如果你不需要對core-js做API轉換，那就安裝@babel/runtime並把corejs配置項設定為false即可。

如果你需要用core-js2做API轉換，那就安裝@babel/runtime-corejs2並把corejs配置項設定為2即可。

如果你需要用core-js3做API轉換，那就安裝@babel/runtime-corejs3並把corejs配置項設定為3即可。

注：

1.那regenerator為何預設值是true？我的理解是，實現Generator與async轉換API程式碼較少，而且也需要一些語法轉換，所以預設值取了true。我們也可以設為false，不過沒必要。
2.在安裝@babel/preset-env的時候，其實已經自動安裝了@babel/runtime，不過在專案開發的時候，我們一般都會再單獨npm install一遍@babel/runtime。