bable-preset-env，通过根据目标浏览器或运行环境自动确认所需Babel和polyfills，将es2015+转为es5。
在没有任何配置的情况下bable-preset-env行为与babel-preset-latest（或babel-preset-es2015, babel-preset-es2016, 和 babel-preset-es2017 集合）完全相同。
{
"presets": ["env"]
}
但是我们不建议这样使用，因为这样完全没有利用它针对特定浏览器的强大功能。你可以配置它为仅包含需要支持的浏览器的浏览器所需要的polyfills和转换。只编译需要的东西可以使包更小和更简单。
下边的例子仅包括覆盖率达于0.25%的用户所需的polyfill和代码转换，忽略了IE11和Opera Mini。我们使用browserslist来解析此信息。因此你可以使用browserslist来查询任何有效的信息
{
"presets": [
["env", {
"targets": {
// The % refers to the global coverage of users from browserslist
"browsers": [ ">0.25%", "not ie 11", "not op_mini all"]
}
}]
]
}
你还可以指定浏览器的版本，而不是使用带有{"target":{"chrome":"52"}}的查询。如果您的目标是node.js而不是浏览器，你可以配置babel-preset-envt为只包含特定版本所需要polyfill和代码转换
{
"presets": [
["env", {
"targets": {
"node": "6.10"
}
}]
]
}
为了方便，你可以使用node:current来设置为仅包含node.js用于运行Babel的版本。
{
"presets": [
["env", {
"targets": {
"node": "current"
}
}]
]
}
更多选项
How it Works（如何工作
Install（安装）
Usage（使用）
Options（选项）
Examples（案例）
Caveats（注意事项）
安装
npm install --save-dev babel-preset-env
或
yarn add babel-preset-env --dev
没有选项的默认行为将运行所有转换
{
"presets": ["env"]
}
选项
更多信息请查看 plugin/preset options文档
targets
{ [string]: number | string }, 默认为 {}.
获取要支持的环境变量的版本
每一个目标环境使用一个数字或字符串（我们建议在制定一个次级版本时使用字符串如node:'6.10'）
事例环境：chrome, opera, edge, firefox, safari, ie, ios, android, node, electron.
targets.node
number | string | "current" | true
如果你想根据当前node版本变异，可以配置为node:true或node:"current",这样配置将与process.versions.node相同。
targets.browsers
Array<string> | string
targets.uglify
true
使用uglify-js缩小代码
使用uglify-js缩小代码时，由于uglify -s不支持任何ES2015+语法，因此在针对以后的浏览器时可能会遇到语法错误。
为了防止这些错误-将uglify选项设置为true，这将启用所有转换插件，因此，您的代码将完全编译为ES5。但是，useBuiltIns选项仍将像以前一样工作，并且只包含目标所需的polyfill。
Uglify通过Uglify-es支持ES2015语法。如果您使用的是uglify es不支持的语法，我们建议您使用babel-minify。
注意：此选项在2.x中已被弃用，并替换为forceAllTransforms选项
spec
boolean, defaults to false.
为此预设中支持它们的任何插件启用更符合规范但可能更慢的转换。
loose
boolean, defaults to false.
为这个预设中允许它们的任何插件启用“松散”转换。
modules
"amd" | "umd" | "systemjs" | "commonjs" | false, 默认 "commonjs".
启用ES6模块语法到另一个模块类型的转换。将此设置为false将不会转换模块。
debug
boolean, 默认 false.
将使用的目标/插件和插件数据版本中指定的版本输出到控制台
include
Array<string>, 默认[].
总是包含的插件数组。
exclude
Array<string>,默认 [].
总是要排除/删除的插件数组。
useBuiltIns
boolean, defaults to false.
一种为polyfill应用babel-preset-env的方法（通过“babel-polyfill”）。
注：这不是目前polyfill实验/stage-x内置像常规的“babel-polyfill”所做的。这只适用于npm>=3（至少要与babel6一起使用）
npm install babel-polyfill --save
此选项启用一个新插件，该插件将语句import "babel-polyfill"或require("babel-polyfill")替换为基于环境的babel-polyfill的个别requires。
注意：只需在整个应用程序中使用require("babel-polyfill")一次。多次导入将抛出一个错误，因为它可能导致全局冲突和其他难以跟踪的问题。我们建议创建一个只包含require语句的单条目文件。
Examples
以各种目标导出
export class A {}
仅针对Chrome 52
.babelrc
{
"presets": [
["env", {
"targets": {
"chrome": 52
}
}]
]
}
Out
class A {}
exports.A = A;
目标Chrome 52带有webpack 2/汇总和松散模式
.babelrc
{
"presets": [
["env", {
"targets": {
"chrome": 52
},
"modules": false,
"loose": true
}]
]
}
Out
export class A {}
通过browserslist以特定浏览器为目标
.babelrc
{
"presets": [
["env", {
"targets": {
"chrome": 52,
"browsers": ["last 2 versions", "safari 7"]
}
}]
]
}
Out
export var A = function A() {
_classCallCheck(this, A);
};
通过设置node: true 或 node: "current"
.babelrc
{
"presets": [
["env", {
"targets": {
"node": "current"
}
}]
]
}
Out
class A {}
exports.A = A;
设置 debug 输出
.babelrc
{
"presets": [
[ "env", {
"targets": {
"safari": 10
},
"modules": false,
"useBuiltIns": true,
"debug": true
}]
]
}
stdout
Using targets:
{
"safari": 10
}
Modules transform: false
Using plugins:
transform-exponentiation-operator {}
transform-async-to-generator {}
Using polyfills:
es7.object.values {}
es7.object.entries {}
es7.object.get-own-property-descriptors {}
web.timers {}
web.immediate {}
web.dom.iterable {}
设置include and exclude指定 plugins/built-ins
始终包换箭头函数, 排除generators
{
"presets": [
["env", {
"targets": {
"browsers": ["last 2 versions", "safari >= 7"]
},
"include": ["transform-es2015-arrow-functions", "es6.map"],
"exclude": ["transform-regenerator", "es6.set"]
}]
]
}
网友评论