前言
前面我们写了几篇很长的文章去介绍babel源码、preset-env、runtime,
在babel配置中我们可能用过@babel/polyfill、core-js、core-js-pure、@babel/runtime、@babel/runtime-corejs2、@babel/runtime-corejs3、@babel/plugin-transform-runtime、@babel/preset-env,当然这些都有出现在我们的文章中的,并且很详情的说了每个应用场景,所以强烈推荐小伙伴去看一下这几篇文章。
总结
好啦~ 我们今天就总结一下这些babel配置之前的联系,然后最后说一下在实战项目中的一些配置建议。
@babel/polyfill
As of Babel 7.4.0, this package has been deprecated in favor of directly including
core-js/stable
(to polyfill ECMAScript features) andregenerator-runtime/runtime
(needed to use transpiled generator functions):
也就是说在babel7.4.0之后是弃用掉的,然后现在由core-js替换,core-js可以用以下代码来替换之前的@babel/polyfill:
//import "@babel/polyfill"; //之前的写法
import "core-js/stable";
import "regenerator-runtime/runtime";
core-js&core-js-pure
core-js出现其实就是为了能让你代码中的一些api(比如:Array.prototype.include)能够运行,等于是在你的代码跟浏览器中加入了一个垫片,所以在babel7.4.0之后所有的polyfill操作都依赖core-js,core-js-pure是core-js的另外一个版本,可以不污染全局变量,比如我们的@babel/plugin-transform-runtime插件就是依赖的core-js-pure,core-js的更多用法跟介绍大家可以看官网https://github.com/zloirock/core-js
@babel/runtime
@babel/runtime、@babel/runtime-corejs2、@babel/runtime-corejs3这几个都叫“@babel/runtime”,只是每一个对应的实现不一样,都是提供给@babel/plugin-transform-runtime插件做依赖,@babel/plugin-transform-runtime插件会根据corejs的配置做不通的runtime依赖,具体用法大家可以参考之前的几篇文章。
@babel/plugin-transform-runtime 和 @babel/preset-env
@babel/preset-env包含了一些基本es语法转换的插件(箭头函数、类转换等等),同时还支持polyfill,有usage跟entry模式,但是preset-env添加polyfill会像之前使用@babel/polyfill一样,会污染全局变量。
@babel/plugin-transform-runtime主要是利用@babel/runtime提取了一些公共的babel帮助函数,同时也支持polyfill的添加,添加的polyfill都是以一个局部变量的形式引入,不会污染全局变量。
如果你做的是一个二方库,然后需要被别人依赖,那么建议使用@babel/plugin-transform-runtime来引入polyfill,因为你要尽可能的专注于做自己的事,而不是说去影响别人,语法转换可以使用preset-env预设,比如以下配置:
module.exports = {
presets: [
[
"@babel/preset-env",
]
],
plugins: [
[
"@babel/plugin-transform-runtime",
{
corejs: {
version: 3, proposals: true},
helpers: true,
useESModules: true,
regenerator: true,
absoluteRuntime: "./node_modules"
}
]
]
};
如果你做的是一个普通的业务项目的话,可以用preset-env来转换语法和polyfill,然后再利用@babel/plugin-transform-runtime来引入helpers跟generator做到代码重复利用,比如以下配置:
module.exports = {
presets: [
[
"@babel/preset-env",
{
corejs: 3,
useBuiltIns: 'usage',
}
]
],
plugins: [
[
"@babel/plugin-transform-runtime",
{
corejs: false,
helpers: true,
useESModules: false,
regenerator: true,
absoluteRuntime: "./node_modules"
}
]
]
};
小伙伴思维也不要被某种方式定死,还是要根据自己项目需要灵活配置,找到自己项目最好的就可以了,说白了不管是runtime还是preset-env还是之前的@babel/polyfill,掌握原理后随意搭配都是可以的,比如我们接下来看一下vue-cli4.1.1中是怎么对babel配置的。
@vue/cli-service@^4.1.1
大家可以安装一下@vue/cli-service@^4.1.1:
npm install -D @vue/cli-service@^4.1.1
然后我们找到vue-cli中对babel的配置文件,
node_modules/@vue/babel-preset-app/index.js:
const path = require('path')
const defaultPolyfills = [
// promise polyfill alone doesn't work in IE,
//