babel preset env配置

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