一. 使用方式
-
babel.config.json（项目根目录，一般推荐这种方式）
{ "presets": [...], "plugins": [...] }
-
.babelrc.json（配置文件是否仅适用于项目的某个部分）
{ "presets": [...], "plugins": [...] }
-
package.json
{
"name": "my-package",
"version": "1.0.0",
"babel":
{
"presets": [ ... ],
"plugins": [ ... ],
}
}
二. Presets
Babel 的预设（preset）可以被看作是一组 Babel 插件和/或 options 配置的可共享模块。
官方提供的预设
- @babel/preset-env for compiling ES2015+ syntax
- @babel/preset-typescript for TypeScript
- @babel/preset-react for React
- @babel/preset-flow for Flow
@babel/preset-env 可以根据配置的目标浏览器或者运行环境来自动将ES2015+的代码转换为es5。
{
"presets": [
["@babel/preset-env"
"targets": {
"esmodules": true,
"node": "current"
}
]
]
}
package.json中可以加入支持的浏览器配置
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
也可以在target中配置
{
"targets":
{
"chrome": "58",
"ie": "11"
}
}
useBuiltIns：“ usage”| “ entry”| false，默认为 false。这个选项配置@babel/preset-env 处理 polyfills 的方式。值为usage 时会根据配置的浏览器兼容，以及你代码中用到的 API 来进行 polyfill，实现了按需添加。
三. Babel-polyfill
Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。举例来说，ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。
从 Babel 7.4.0开始，这个包已经被弃用
四. @babel/plugin-transform-runtime
@babel/plugin-transform-runtime: 该插件会开启对 Babel 注入的helper code（helper可译为辅助函数）的复用，以节省代码体积，原因是babel使用非常小的help来实现常见的函数，比如 _ extend。默认情况下，这些函数会被添加到每个需要它的文件。这种复制有时是不必要的，所以需要@babel/plugin-transform-runtime
