babel7中 corejs 和 corejs2 的區別

最近在給項目升級 webpack4 和 babel7，有一些改變但是變化不大。具體過程可以參考這篇文章 webpack4：連奏中的進化。只是文章中沒有對最新的 css 提取插件進行修改，主要是把 ExtractTextPlugin 換成 (mini-css-extract-plugin)[https://github.com/webpack-contrib/mini-css-extract-plugin]。

按照這些文檔中的說法照着做就沒有問題。碰到也是什么版本不對啊，小心升級就可以了。
在升級中發現 babel7 變化挺大的，包括插件和包。
其中一項功能特別贊，就是 @babel/preset-env 中的 useBuiltIns 選項，如果你設置了 usage，babel 編繹的時候就不用整個 polyfills , 只加載你使用 polyfills，這樣就可以減少包的大小。

在使用 babel 中還想減少代碼，就需要引入 babel 的運行時：

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

需要注意的是：

1. 兩個包引入的范圍不一樣：一個在開發時引入，一個在運行時引入。
2. plugin-transform-runtime 已經默認包括了 @babel/polyfill，因此不用在獨立引入。

在 plugin-transform-runtime 中有一個 corejs 很奇怪，可以設置成 false 或者 2。這是為什么這樣？

大家知道 corejs 是一個給低版本的瀏覽器提供接口的庫，如 Promise, map, set 等。
在 babel 中你設置成 false 或者不設置，就是引入的是 corejs 中的庫，而且在全局中引入，也就是說侵入了全局的變量。可以觀察以下的代碼：

// 這是你寫的代碼
function sleep(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve()
    }, ms)
  })
}
// babel 編繹成的代碼
"use strict";

require("core-js/modules/es6.promise");  // 這里可以看出是全局引入

function sleep(ms) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve();
    }, ms);
  });
}

如果你的全局有一個引入，不要讓引入的庫影響全局，那你就需要引把 corejs 設置成 2。下面就是設真置成 2，編繹成的代碼：

"use strict";

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

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

function sleep(ms) {
  return new _promise.default(function (resolve, reject) {
    setTimeout(function () {
      resolve();
    }, ms);
  });
}

可以從編繹出的代碼看到，promise 代碼變成了一個獨立的變量 _promise，不會影響全局的 Promise。
這樣的好處是，引入的庫者自己引入了一個變量，這樣如果你引入的第三方庫會對 Promise 進行一些自定義操作，這樣的功能可以避免第三方庫報錯。

還要注意一點是： 如果你設置了 corejs2，那你就需要加入下面的庫:

npm install @babel/runtime-corejs2

具本的代碼可以在這里找到 babel-preset-htoooth-test

后話

在使用 babel7 的時候，發現很多的插件需要手動的加上，一點也不方便，因此我做了一個庫： babel-preset-htoooth，把所有的插件都引入，然后參數進行控制，如果想使用 corejs2，只用設置成 corejs:2 就可以，非常方便。
示例庫也是用這個庫來進行演示的。