結合Babel 7.4.0 談一下Babel-runtime 和 Babel-polyfill

摘要：對於初學者而言，對於Babel的使用可能一直稀裏糊塗，對於不少參數的配置和區別也都是隻知其一;不知其二。本文將經過一些使用 babel-runtime 和 babel-polyfill 的簡單例子 ，幫助讀者區分理解二者的使用場景。

前言

咱們知道Babel是一個通用型的JS編譯器，經過Babel咱們能夠把最新標準編寫的JS代碼向下編譯成兼容各類瀏覽器或Node的通用版本。你能夠經過安裝預設（presets，一系列同類插件組合） 或 插件（plugins） 告訴Babel應該如何進行代碼轉譯，例如：@babel/preset-env （轉譯 ES6 ~ ES9 的語法）、 @babel/preset-react （轉譯React )。

@babel/preset-env

介紹

preset-env是ES語法插件的合集，官方已經再也不推薦使用preset-201x之類的包，該包能夠經過配置自動兼容代碼，包括自動引入polyfill墊片處理新的API（例如：Promise,Generator,Symbol等）以及 實例方法（例如Array.prototype.includes等）。

使用

1. 在根目錄下建立.babelrc配置文件

   {
        "presets": [
            [ "@babel/preset-env", {
                "targets": {},
                "useBuiltIns": false,
                "corejs": false
            }]
        ]
    }
   複製代碼

   • targets: 針對項目指定生成適應環境的代碼。若是不進行配置，babel會轉義全部ES6+進行環境適配，十分不推薦該用法。
   • useBuiltIns：該選項用來配合@babel/polyfill進行使用，針對Babel > 7.4.0, 官方再也不推薦使用該庫，請選擇core-js，根據安裝core-js版本在corejs選項填寫數字2或3。
     

2. 安裝@babel/preset-env 以及 core-js

   源碼

   const test = () => {
      `es8`.padStart(2)
   }
   複製代碼

   轉譯結果

   // useBuiltIns: false
    "use strict";
   
   var test = function test() {
      'es8'.padStart(2);
   };
   複製代碼

   // useBuiltIns: "usage" 
   // corejs: 3
    "use strict";
   
   require("core-js/modules/es.string.pad-start");
   
   var test = function test() {
      'es8'.padStart(2);
   };
   複製代碼

   能夠看出當使用 useBuiltIns: false 時, Babel只對箭頭函數進行了轉換，使用useBuiltIns: usage 時，Babel動態引入了 core-js/modules/es.string.pad-start 爲全局對象。

注： 咱們知道，ES+中不只包含新增的語法（如箭頭函數、類），還有一些實例的擴展（Array.prototype.includes等），以及不少內置函數（如Promise、Symbol）。然而preset-env在不引入polyfill時，對於處理這些應用場景是無能爲力的。而爲了解決這樣的問題，咱們一般有兩種方法：使用 Polyfill 或 Babel-runtime 進行功能填充。接下來咱們會舉例說明二者的優缺點以及應用場景。

@babel/polyfill

前文提到了一點 useBuiltIns 引入polyfill處理的簡單例子，接下來咱們再結合一些例子具體的瞭解polyfill的使用。 在 Babel > 7.4.0 以前，一般咱們會安裝 babel-polyfill 或 @babel/polyfill來處理實例方法和ES+新增的內置函數，而7.4.0以後，當咱們選擇安裝 @babel/polyfill時，會收到以下的警告 ：

warning @babel/polyfill@7.4.4: � As of Babel 7.4.0, this
package has been deprecated in favor of directly
including core-js/stable (to polyfill ECMAScript
features) and regenerator-runtime/runtime
(needed to use transpiled generator functions):

  > import "core-js/stable";
  > import "regenerator-runtime/runtime";
複製代碼

是否是有點懵逼ㄟ(▔,▔)ㄏ 。什麼意思呢？其實polyfill自己就是stable版本的core-js和regenerator-runtime的合集，即 import @babel/polyfill等同於：

import 'core-js/stable';
import 'regenerator-runtime/runtime';
複製代碼

因此在針對Babel >= 7.4.0 的狀況，咱們須要安裝 core-js 替代 babel-polyfill,而 regenerator-runtime 會在咱們安裝 @babel/runtime 時自動安裝，因此沒必要單獨安裝了。

配合引入墊片polyfill的方式根據useBuiltIns的不一樣能夠分爲三種，即 entry, usage 和 false。

源碼

/******* useBuiltIns: entry 時添加一下兩行代碼 ********/ 
import 'core-js/stable';
import 'regenerator-runtime/runtime';
/****************************************************/

const a = new Promise();
let b = new Map()
複製代碼

轉譯結果

// 1. useBuiltIns: entry
"use strict";

require("core-js/modules/es.symbol");

require("core-js/modules/es.symbol.description");

require("core-js/modules/es.symbol.async-iterator");

// ..... 此處省略400個包

require("regenerator-runtime/runtime");

var a = new Promise();
var b = new Map();


// 2. useBuiltIns: usage
"use strict";

require("core-js/modules/es.array.iterator");

require("core-js/modules/es.map");

require("core-js/modules/es.object.to-string");

require("core-js/modules/es.promise");

require("core-js/modules/es.string.iterator");

require("core-js/modules/web.dom-collections.iterator");

var a = new Promise();
var b = new Map();

// 3. useBuiltIns: false
"use strict";

var a = new Promise();
var b = new Map();
複製代碼

對比三種使用方法咱們能夠發現，false 只作了語法轉換， entry 引入了全部的es擴展包，無論用不用得着一股腦都打包進來，只有 usage 會自動檢測代碼中用到的功能自動引入模塊（注：babel默認不會檢測第三方依賴包代碼，因此使用 usage 時，可能會出現引入第三方的代碼包未注入模塊而引起bug）。

因此，這裏若是不考慮代碼包大小，你能夠選擇 entry 方式。而若是你須要代碼儘量的精簡，則使用 usage，這也是官方推薦的用法。

思考： 到這裏是否是以爲項目使用polyfill，寫代碼已經能夠6的飛起了，哈哈~。那咱們假設一種應用場景，假設咱們須要發佈一個類庫給到別人使用，咱們使用polyfill的方式引入了內置函數Promise，不巧的是別人的本地代碼裏也封裝了一個函數叫Promise，完蛋，真李逵碰上了假李逵，你說你死不死￣□￣。 因此爲了和平，這裏就須要咱們的 @babel/runtime 粉墨登場了。

@babel/runtime

babel-runtime通常應用於兩種場景：

• 開發類庫/工具（生成不污染全局空間和內置對象原型的代碼）
• 藉助 @babel/runtime 中幫助函數（helper function）移除冗餘工具函數

注： 咱們應該常常在其餘文檔和使用說明中看到 runtime 不支持實例方法，確實在以前的使用中，不管是 Babel 7.0.0 ~ 7.4.0 抑或 Babel < 7.0.0, 對此都無能爲力。他們只能經過配置 corejs （可選 false | 2）來決定是否使用 babel/runtime-corejs 替代core-js 抑或 polyfill （可選 true | false）來決定是否全局引入新的內置函數（new built-ins）,然而其實這二者並無根本改變, corejs: 2 實際上等同於 7.0.0 版本以前的 polyfill: true。

重點： 真正的改變出如今 Babel 7.4.0 以後，你能夠選擇引入 @babel/runtime-corejs3，設置 corejs: 3 來幫助您實現對實例方法的支持。

咱們接下來基於Babel 7.4.0來看幾個例子：

配置項

{
    "presets": [
        [
            "@babel/preset-env"
        ],
    ],
    "plugins": [
        ["@babel/plugin-transform-runtime", {
            "corejs": false // 可選 false | 2 | 3
        }]
    ]
}
複製代碼

源碼 -- 移除冗餘工具函數

class Person {}
複製代碼

轉譯結果

// 移除plugins中runtime配置
"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Person = function Person() {
  _classCallCheck(this, Person);
};


// 引入插件runtime
"use strict";

var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault");

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/classCallCheck"));

var Person = function Person() {
  (0, _classCallCheck2["default"])(this, Person);
};
複製代碼

能夠看出，引入runtime，能夠避免在多文件時編譯生成屢次相同的工具函數。

源碼 -全局污染和實例方法示例

const a = new Promise();
[1, 2, 3].includes(1)
複製代碼

轉譯結果

// corejs: false
"use strict";

var a = new Promise();
[1, 2, 3].includes(1);

// corejs: 2
"use strict";

var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault");

var _promise = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/promise"));

var a = new _promise["default"]();
[1, 2, 3].includes(1);

// corejs: 3
"use strict";

var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");

var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));

var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));

var _context;

var a = new _promise["default"]();
(0, _includes["default"])(_context = [1, 2, 3]).call(_context, 1);

複製代碼

結合一下代碼咱們能夠看出，corejs: false 其實等同於使用 @babel/polyfill 時的 useBuiltIns: false，只對ES語法進行了轉換。corejs：2 等同於 Babel 6時的 polyfill: true ，它們都會爲代碼建立一個沙盒環境，爲 core-js 提供假名，這樣就作到了不污染全局空間。corejs: 3 是在 corejs: 2的基礎上進而解決了以前沒法實例方法的窘況，同時也保持了不污染全局空間，簡直完美~

總結

1. Babel < 7.4.0
   • 開發類庫, 選擇 @babel/runtime
   • 內部項目，@babel/polyfill
2. Babel >= 7.4.0，啥也不說，直接上 @babel/runtime吧，由於你要的全都有啊