babel7中 corejs 和 corejs2 的区别

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 就可以，非常方便。

示例库也是用这个库来进行演示的。