"use strict";

require("regenerator-runtime/runtime");

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

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

require("core-js/modules/es7.array.includes");

var array = [1, 2, 3, 4, 5, 6];
array.includes(function (item) {
  return item > 2;
});
new Promise();

function a() {
  return regeneratorRuntime.async(function a$(_context) {
    while (1) {
      switch (_context.prev = _context.next) {
        case 0:
          console.log(1);

        case 1:
        case "end":
          return _context.stop();
      }
    }
  });
}

以上所有的墊片的導入都是直接掛載在全局對象上的，對于寫業(yè)務API的時候這樣并不影響使用，但是如果對于開發(fā)第三方包的情況，babel-polyfill 會污染全局變量，給很多類的原型鏈上都作了修改，這種情況就會變得非常不可控。

@babel/plugin-transform-runtime和@babel/runtime 讓Babel在更進一步

更改babel配置

const presets = [
  [
    "@babel/env",
    {
      targets: {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      },
      // useBuiltIns: "usage",
    },
  ],
];

const plugins = [
  [
    "@babel/plugin-transform-runtime",
    {
      "corejs": false,
      "helpers": true,
      "regenerator": true,
      "useESModules": false
    }
  ]
]

module.exports = { presets,plugins };

其中的corejs參數(shù)有坑，后面說!

我們在來看看打包結果

"use strict";

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

var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs2/regenerator"));

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

// import "@babel/polyfill"
var array = [1, 2, 3, 4, 5, 6];
array.includes(function (item) {
  return item > 2;
});
new _promise.default();

function a() {
  return _regenerator.default.async(function a$(_context) {
    while (1) {
      switch (_context.prev = _context.next) {
        case 0:
          console.log(1);

        case 1:
        case "end":
          return _context.stop();
      }
    }
  });
}

是不是很神奇所有的新api都包裹在一個對象里，沒有去污染全局變量。

soga，既然這么神奇，為嘛不直接一步到位用這種方法呢？

我們仔細一點看的話，發(fā)現(xiàn)下面的代碼并沒有被轉(zhuǎn)化，這就是babel/plugin-transform-runtime的缺點了，它并沒有去轉(zhuǎn)義實例新API的方法，如果在代碼里使用到了新API的實例方法，這里是會跪的。

var array = [1, 2, 3, 4, 5, 6];
array.includes(function (item) {
  return item > 2;
});

還需要留意的一點，在package.json下@babel/plugin-transform-runtime是在devDependencies，@babel/runtime是在dependencies下(因為里面都是轉(zhuǎn)化的API墊片)

  "devDependencies": {
    "@babel/plugin-transform-runtime": "^7.7.6",
  },
  "dependencies": {
    "@babel/runtime": "^7.7.6"
  }

@babel/runtime內(nèi)部集成了

• core-js

  轉(zhuǎn)換一些內(nèi)置類 (Promise, Symbols等等) 和靜態(tài)方法 (Array.from 等)。絕大部分轉(zhuǎn)換是這里做的。自動引入

• regenerator

  作為 core-js 的拾遺補漏，主要是 generator/yield 和 async/await 兩組的支持。當代碼中有使用 generators/async 時自動引入。

最后大殺器，無敵巨坑：corejs3

我們應該經(jīng)常在其他文檔和使用說明中看到 runtime 不支持實例方法，確實在之前的使用中，無論是 Babel 7.0.0 ~ 7.4.0 抑或 Babel < 7.0.0, 對此都無能為力。只能通過配置 corejs （可選 false | 2）來決定是否使用 babel/runtime-corejs 替代core-js 抑或 polyfill （可選 true | false）來決定是否全局引入新的內(nèi)置函數(shù)（new built-ins）,然而其實這兩者并沒有根本改變, corejs: 2 實際上等同于 7.0.0 版本之前的 polyfill: true。
重點： 真正的改變出現(xiàn)在 Babel 7.4.0 之后，你可以選擇引入 @babel/runtime-corejs3，設置 corejs: 3 來幫助您實現(xiàn)對實例方法的支持。

如果在Babel 7.4之后的版本，更改配置corejs : 3

const plugins = [
  [
    "@babel/plugin-transform-runtime",
    {
      "corejs": 3,   //"corejs": false // 可選 false | 2 | 3
      "helpers": true,
      "regenerator": true,
      "useESModules": false
    }
  ]
]

module.exports = { presets,plugins };

在看轉(zhuǎn)化結果

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

var array = [1, 2, 3, 4, 5, 6];
(0, _includes.default)(array).call(array, function (item) {
  return item > 2;
});

它連實例API都轉(zhuǎn)了，（早干嘛去了，前端ER真的學不動了?。。。?/p>

最后附上Webpack版本Babel配置

{
    "presets": [
        [
            "@babel/preset-env",
            targets: {
                "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
            },
        ],
    ],
    "plugins": [
        ["@babel/plugin-transform-runtime", {
            "corejs": 3
        }]
    ]
}