npm install babel-preset-env --save-dev

在没有任何配置选项的情况下，babel-preset-env 与 babel-preset-latest（或者 babel-preset-es2015，babel-preset-es2016 和 babel-preset-es2017一起）的行为完全相同。

{
  "presets": ["env"]
}

你也可以仅仅配置项目所浏览器所需的 polyfill 和 transform 。只编译所需的会使你的包更小。

示例中只包含了每个浏览器最后两个版本和 Safari 大于等于 7 版本所需的 polyfill 和。我们使用 来解析这些信息，所以你可以使用 。

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

同样，如果你目标开发 Node.js 而不是浏览器应用的话，你可以配置 babel-preset-env 仅包含特定版本所需的 polyfill 和 transform：

{
  "presets": [
    ["env", {
      "targets": {
        "node": "6.10"
      }
    }]
  ]
}

方便起见，你可以使用 "node": "current" 来包含用于运行 Babel 的 Node.js 最新版所必需的 polyfill 和 transform 。

{
  "presets": [
    ["env", {
      "targets": {
        "node": "current"
      }
    }]
  ]
}

看一下如下很多选项 (特别是 useBuiltIns 用更少的 polyfill)!

如何运行

使用 等外部数据来确定浏览器情况。（如果必要的话我们可以提PR）

我们可以定期运行 来 。

参考:

目前位于 。

在多数情况下这应该很直截了当。在一些情况下，可能需要分割为很多或者某些不够独立（或不能实现）。

没有选项的认行为与 babel-preset-latest 相同。

它不会包含 stage-x 。env 将会我们认为最新版本的JavaScript的所有（过我们匹配在 中所作的）。

参考:

如果你的项目需要 IE8 和 Chrome 55 。它必须IE8所的所有，因为你仍然需要它们。

例如，如果你基于Node 6构建项目，箭头将不会被转换。但项目基于Node 0.12的时候，它们将会被转换。

使用通过像 > 1%, last 2 versions 语句来声明的环境。

参考:

安装

通过 :

npm install --save-dev babel-preset-env

或 :

yarn add babel-preset-env --dev

使用

没有选项的认行为将运行所有transform（与 相同）。

{
  "presets": ["env"]}

选项

有关设置预设选项的更多信息，请参阅 文档。

{ [string]: number | string }, 认为 {}。

运行环境的对象

每个目标环境都有数字或字符串 (我们建议在使用次要版本的时候使用字符串，例如 node: "6.10")。

运行示例环境: chrome, opera, edge, firefox, safari, ie, ios, android, node, electron。

这些 是通过从 中数据的 中的。

number | string | "current" | true

如果需要编译当前node版本，你可以指定 "node": true 或者 "node": "current", 它与 "node": process.versions.node 相同。

Array<string> | string

可以利用 选择的浏览器 (例如: last 2 versions, > 5%)。

请注意，浏览器的结果会被来自 targets 的明确条目覆盖。

true

在使用 uglify-js 压缩时, 由于 uglify-js 任何ES2015+语法，因此浏览器运行时可能会遇到语法。

为了防止这些的发生 - 将 uglify 选项设置为 true， 它将会启用所有的翻译, 因此你的会被编译为ES5. 然而， useBuiltIns 选项仍然会像之前一样工作，只包含你的目标浏览器所需要的 polyfills。

Uglify通过 ES2015语法。如果您使用uglify-es的语法，我们推荐使用 。

注意: 这个选项在 2.x 中已经弃用，并且用 来替代.

boolean， 认为 false。

对个 preset 中它们的启用更符合规范，但可能较慢的方式。

boolean， 认为 false。

允许它们为这个 preset 的任何启用"loose" 转换。

"amd" | "umd" | "syjs" | "commonjs" | false， 认为 "commonjs".

启用将ES6模块语法转换为另一种模块类型。

将其设置为 false 就不会转换模块。

boolean， 认为 false。

将使用的目标浏览器/和在 中指定的版本用 console.log 。

Array<string>， 认为[]。

注意: whitelist 已经被弃用，将在下主要版本中。

它总是包含一系列。

有效的选项。

- (babel-plugin-transform-es2015-spread) 和无前缀的 (transform-es2015-spread)。

，例如 map、 set、 或者 object.assign。

如果原生的环境有个bug，或者的与的的组合不起作用，这个选项将会是非常有用的选项。

例如， Node 4 原生类但类扩展。如果 super 与扩展参数一起使用，那么需要 include 选项 transform-es2015-classes 因为如果不是以 super 方式进行传播，则不可能进行传输。

注意: include 与 exclude 选项 仅仅 适用于 ; 所以，例如，包含 transform-do-expressions 或者不包含 transform-function-bind 将会抛出. 要在preset中使用 不包含 的, 请直接将它们到你的 中。

Array<string>，认为 []。

总是移除的数组。

可能的选项与 include 选项相同。

如果你不使用器并且不想包含 regeneratorRuntime (当使用 useBuiltIns 时)或者使用另像而不是的，这个选项对于像 transform-regenerator 这样的"黑名单"转换很有用。

boolean，认为 false。

一种将polyfill应用于 babel-preset-env 中的 (通过 "babel-polyfill")。

注意: 目前这种方式并没有像普通的"babel-polyfill"那样的试验性polyfill/stage-x内置。 这只适用于npm >= 3（无论如何应该与Babel 6一起使用）。

npm install babel-polyfill --save

这个选项可以启用新的来替换语句 import "babel-polyfill" 或者 require("babel-polyfill") 以及基于浏览器环境的 babel-polyfill 个性化需求。

注意: 在你的整个应用里只使用一次 require("babel-polyfill");。 多次 imports 或 requires babel-polyfill 会引起报错，因为它可能导致全局冲突和其他难以追踪的问题。 我们建议创建只包含 require 语句的单个入口。

In

import "babel-polyfill";

Out (基于环境的不同)

import "core-js/modules/es7.string.pad-start";
import "core-js/modules/es7.string.pad-end";
import "core-js/modules/web.timers";
import "core-js/modules/web.immediate";
import "core-js/modules/web.dom.iterable";

这也将直接用于 core-js (import "core-js";)

npm install core-js --save

举例

export class A {}

.babelrc

{
  "presets": [
    ["env", {
      "targets": {
        "chrome": 52
      }
    }]
  ]
}

Out

class A {}exports.A = A;

.babelrc

{
  "presets": [
    ["env", {
      "targets": {
        "chrome": 52
      },
      "modules": false,
      "loose": true
    }]
  ]
}

Out

export class A {}

.babelrc

{
  "presets": [
    ["env", {
      "targets": {
        "chrome": 52,
        "browsers": ["last 2 versions", "safari 7"]
      }
    }]
  ]
}

Out

export var A = function A()
 {
  _classCallCheck(this, A);
};

.babelrc

{
  "presets": [
    ["env", {
      "targets": {
        "node": "current"
      }
    }]
  ]
}

Out

class A {}exports.A = A;

.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 {}

始终包含箭头，明确排除器

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      },
      "include": ["transform-es2015-arrow-functions", "es6.map"],
      "exclude": ["transform-regenerator", "es6.set"]
    }]
  ]
}

注意事项

如果在使用 转换时 发生 Error: Unexpected token ... 请确保该更新至至少 v6.19.0。

其余项目