背景
- 最近总听很多人在问babel-polyfill到底要不要了?我于是到处百度搜资料整理了下。
babel-polyfill相关
- 7.0版本前是
babel-core
babel-polyfill
babel-runtime
- 之后就变成了作用域包:
@babel/core
@babel/polyfill
@babel/runtime
- 在7.4后
@babel/polyfill
被废弃。不用怀疑,无论是npm上还是babel官网上都写是废弃了。 - 实际上以前这个polyfill包里面有2个包,一个叫
core-js
,另一个叫regenerator-runtime
,而core-js
是一个js标准库的polyfill,所以以前装polyfill本质其实是找的这个包。现在为啥被废弃?官网这么解释:
@babel/polyfill is a wrapper package which only includes imports of stable core-js features (in Babel 6 it also included proposals) and regenerator-runtime/runtime, needed by transpiled generators and async functions. This package doesn’t make it possible to provide a smooth migration path from core-js@2 to core-js@3: for this reason, it was decided to deprecate @babel/polyfill in favor of separate inclusion of required parts of core-js and regenerator-runtime.
- 简单来说,就是作者认为这个
@babel/polyfill
这个包,它没办法让大家稳定的从core-js@2
升级到core-js@3
所以这个包就给废弃了。那么这个2和3有多少区别?见网址,简单来说就是es9es10里2没实现的,3全都有。另外以后有新的标准会往3加不会往2加。
babel-runtime相关
- 通过前面可以发现,babel-polyfill本来除了corjs还有个regenerator,那么我们配置的时候是否要装
@babel/plugin-transform-regenerator
(以前命名跟上面一样)?我查了很多资料发现,@babel/runtime
里面自带了个编译generator的,但是编译的语法并不彻底,也就是包括ie8及以下并不识别。所以如果生成器环境运行有问题,是需要装这个插件,通常情况是不需要装这个插件的。 - 另外还有大家比较常装的
@babel/plugin-transform-runtime
,它也要结合@babel/runtime
一起使用,主要功能是提取转换后的公用代码,减少代码冗余。这个配置里有corejs配置,和preset-env里的corejs重了,有人文章里说只要配一个,配上面配下面都行,我个人试验发现配插件里面不行,必须配到preset-env上,不然会报Can't resolve '@babel/runtime-corejs3/helpers/classCallCheck'
这种错误。插件格式如下:官网
{
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"absoluteRuntime": false,
"corejs": false,
"helpers": true,
"regenerator": true,
"useESModules": false
}
]
]
}
preset-env相关
- 现在我们webpack一般使用的是
@babel/preset-env
,这个包以前有好几种,叫babel-preset-es2015
之类的,后来一个个导太麻烦,直接做成了个babel-preset-lastest
,最后又统一扔进这个env里,反正就是个常用配置包。 - 常用大概配置如下:再附上官网查更多设置。
"presets":[
["@babel/preset-env",
{
"targets": { // 配支持的环境 "> 0.25%, not dead"
"browsers": [ // 浏览器
"last 2 versions",
"safari >= 7"
],
"node": "current"
},
"modules": true, //"amd" | "umd" | "systemjs" | "commonjs" | "cjs" | "auto" | false, defaults to "auto".
"debug": true, // debug,编译的时候 console
"useBuiltIns": false, // "usage" | "entry" | false, defaults to false.
"include": [], // 总是启用哪些 plugins
"exclude": [] // 强制不启用哪些 plugins,用来防止某些插件被启用
"loose":false,//boolean, defaults to false.Enable "loose" transformations for any plugins in this preset that allow them.
"corjs":3//corejs2, 3 or { version: 2 | 3, proposals: boolean }, defaults to 2.
}
]
]
- 值得说的就是这里的corjs配置,如果你要编译比较新的语法,那么就需要配置上corjs,preset-env会调用它。否则会给你报错,问你需要指定哪个corjs进行编译。
- 另外还有useBuiltIns这选项选usage就对了,按需引入,entry是全导入。
总结
- 一般简单的配.babelrc就这样就行了:
{
"presets": [
["@babel/preset-env",{
"corejs":3,
"useBuiltIns":"usage"
}]
],
"plugins": [
["@babel/plugin-transform-runtime"]
]
}
- webpack上使用需要装
babel-loader
@babel/runtime
@babel/plugin-transform-runtime
@babel/preset-env
@babel/core
core-js@3
cnpm i babel-loader @babel/runtime @babel/plugin-transform-runtime @babel/preset-env @babel/core core-js@3 -D
- webpack通过babel-loader调用core,core需要用到preset-env,env又需要corejs。插件的transform-runtime需要依赖runtime,大概就是这个关系。