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
需要注意的是：
- 两个包引入的范围不一样：一个在开发时引入，一个在运行时引入。
- 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 就可以，非常方便。
示例库也是用这个库来进行演示的。
