bable-preset-env

2021-01-29  本文已影响0人  壮语

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

    }]

  ]

}

参考链接:https://www.npmjs.com/package/babel-preset-env

上一篇下一篇

猜你喜欢

热点阅读