bable-preset-env

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

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, 默认[].

总是包含的插件数组。

exclude

Array,默认 [].

总是要排除/删除的插件数组。

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"]
    }]
  ]
}

参考链接：www.npmjs.com/package/bab…