babel 配置
@babel/preset-env
通过配置 useBuiltIns 参数有三种实现方式
1. "entry"
需要在入口文件添加import "core-js"
,打包后会根据 browserslist 将import "core-js"
替换为浏览器不兼容的所有 polyfill。
[
"presets": [
["@babel/preset-env",
{
"useBuiltIns": "entry"
}
]
]
}
2. "useage"
参照目标浏览器和代码中所使用到的特性按需引入 polyfill,需要填写另一个参数 corejs
{
"presets": [
["@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": 3
}
]
]
}
Babel 编译通常会排除 node_modules,所以 "useBuiltIns": "usage" 存在风险,可能无法为依赖包添加必要的 polyfill。
3. "false"(默认值)
此时不对 polyfill 做操作。如果引入 @babel/polyfill,则无视配置的浏览器兼容,引入所有的 polyfill。
[
"presets": [
["@babel/preset-env",
{
"useBuiltIns":false
}
]
]
}
@babel/runtime + @babel/plugin-transform-runtime
@babel/runtime 把所有语法转换会用到的辅助函数都集成在了一起。
@babel/plugin-transform-runtime 有三大作用,其中之一就是自动移除语法转换后内联的辅助函数(inline Babel helpers),使用 @babel/runtime/helpers 里的辅助函数来替代。
{
"presets": [
["@babel/preset-env"]
],
"plugins": [
[
"@babel/plugin-transform-runtime", {
"corejs": 3
}
]
]
}
指定执行环境 Browserslist, Browserslist 的配置有几种方式,并按下面的优先级使用:
- @babel/preset-env 里的 targets
- package.json 里的 browserslist 字段
- browserslistrc 配置文件