共计 1641 个字符，预计需要花费 5 分钟才能阅读完成。
babel 的配置可以写在 package.json 中，如下面
// .babelrc
{
“babel”: {
presets: [“@babel/preset-env”, “@babel/preset-stage-2”]
}
}
也可以写在一个.babelrc 的 JSON 配置文件中
{
“presets”: [“@babel/preset-env”, “@babel/preset-stage-2”]
}
@babel/preset-env 配置字段
你可以像上面一样直接指定 presets 为 [“@babel/preset-env”, “@babel/preset-stage-2”], 也可以为每一个 preset 添加配置选项。（使用数组，第一个元素表示 preset 的名字，第二个元素表示配置项）
{
“presets”: [
[“@babel/preset-env”, {
}],
“@babel/preset-stage-2”
]
}
presets 的编译顺序是反向的，因此你应该把 ”stage-2″ 放在 ”env” 后面。
preset-env.targets
{
“presets”: [
[“@babel/preset-env”: {
“targets” : “last 2 versions, not dead”
}]
]
}
// 或者直接指定需要兼容的浏览器
{
“presets”: [
[“env”: {
“targets” : {
“chrome”: “58”,
“ie”: “11”
}
}]
]
}
// 或者是在 targets.browsers 中指定
{
“presets”: [
[“env”: {
“targets” : {
“browsers”: “last 2 versions”,
“esmodules”: true, // 指定该选项，将会忽略 browserslist, 仅支持那些那些原生支持 es6 module 的浏览器
“safari”: true , // 启用 safari 前沿技术
“node”: “true” || “current” // 兼容当前 node 版本代码
}
}]
]
}
browserslist
babel 使用的浏览器查询是来自于 browserslist 项目。这个项目同时被很多前端工具库诸如 auto-prefixer,postcss 使用。最好的指定 browserslist 的方法是使用一个.browserslistrc 配置文件。它可以被项目中多种工具共享。
last 2 vsersions
not dead
你可以使用
npx browserslist
来查看你查看当前项目的 browserslisg
或者是在 browserslist online tool 工具中查看
preset-env.modules
“amd” | “umd” | “systemjs” | “commonjs” | “cjs” | “auto” | false, defaults to “auto”
指定将 es6 modules 转换为何种模块规范。
一般在 webpack 项目中，我们会将此参数设置为 false, 既将 module 交由 webpack 处理，而不是 babel。
如果设置为 false, 将不转换。这在 node 项目中如 mocha 测试中将不会转换 import/export，可能会出错
preset-env.userBuiltIns
“usage” | “entry” | false, defaults to false
This option configures how @babel/preset-env handles polyfills.
“entry”: 在入口文件中加入所有的内置类型如果在.babelrc 中指定 useBuiltIns: ‘entry’, 则应该在项目代码的顶部引入 babel-polyfill
import “@babel/polyfill”
表示全量引入。
“usage”: 只在当前文件中加入该文件用到的内置类型的 polyfill。设置为 usage 不需要在顶部引入 polyfill
“false”: 不自动加入内置类型的 polyfill。
该特性 babel 7 中有效, 测试地址
参考
再见 preset-2015 一口气了解 Babel
