//tips:新手翻译,欢迎指正javascript
这将更容易的废弃无用的代码,并与剩下的代码同步生产使用,原本呢,我不肯定它可以比我预料的时间更早的被生产使用,因此,它在一个单独的分支下面,可是如今,这个分离使我很痛苦!css
babel preset将基于你的实际浏览器及运行环境,自动的肯定babel插件及polyfills,转译ES2015及此版本以上的语言,前端
npm install babel-preset-env --save-dev
在没有配置项的状况下,babel-preset-env表现的同babel-preset-latest同样(或者能够说同babel-preset-es2015, babel-preset-es2016, and babel-preset-es2017结合到一块儿,表现的一致)java
{ "presets": ["env"] }
你也能够经过配置polyfills和transforms来支持你所须要支持的浏览器,仅配置须要支持的语法来使你的打包文件更轻量级。node
下面的例子,包括polyfills和代码,针对各个浏览器的最新的两个版本,以及safari的版本7及以上,针对以上两个条件的兼容状况进行代码转译。咱们根据browserslist来分析具体的支持状况,因此,你能够用任何有效的browserslist查询格式来配置选项。android
{ "presets": [ ["env", { "targets": { "browsers": ["last 2 versions", "safari >= 7"] } }] ] }
相同的,若是你的运行环境使node.js,你页能够配置babel-preset-env来支持一个特殊的node版本ios
{ "presets": [ ["env", { "targets": { "node": "6.10" } }] ] }
为了更佳的方便,可使用"node": "current"根据你运行时的node.js版本,挑选须要的polyfills和transforms来支持。git
{ "presets": [ ["env", { "targets": { "node": "current" } }] ] }
用外部数据例如:compat-table,来肯定浏览器的支持状况。
咱们会按期的跑build-data.js来更新plugins.json
参考:问题7
目前存储在plugin-features.js
这样应该是被大多数人的要求所期待的,有不少的例子说插件集应该被分开,或者某一个插件不够足够独立(或不可能作到)。
默认没有配置的表现同babel-preset-latest同样
不须要包含stage-x插件,env将提供全部的插件,支持到javascript最新的版本。
参考:问题14
若是你target为IE8和chrome55,它将会包含ie8所须要的全部插件,你未来可能仍然会须要支持
例如,若是你bulid在node6上面,箭头函数没有被转换,若是运行在node0.12上面,将会被转
利用browsers来声明支持的环境,经过设置参数,例如>1%, last 2 versions
参考:问题19
浏览器支持列表
browsers列出来在不一样的浏览器上前端语言的支持状况,像工具好比autoprefixer style eslant-plugin-compat或者其余更多的
默认状况下,babel-preset-env会用browserlist config sources
例如,只须要对某个项目在兼容浏览器的最新两个版本以及IE10,仅仅须要这个条件下饿polyfills和plugins
{ "presets": [ ["env", { "useBuiltIns": true }] ] }
last 2 versions IE 10
或者
"browserslist": "last 2 versions, ie 10"
browserslist config在下面几种状况下将会被忽略
目标浏览器是特殊的(targets.browsers)
配置ignoreBrowserslistConfig: true 查看更多
若是targets.browsers是正确的,browserslist config将会被忽略。在targets中配置的特殊浏览器将被合并到任何其余明肯定义的目标浏览器上。若是合并,明肯定义的目标将覆盖从其接收的相同目标targets.browsers。
若是目标浏览器不明确,程序将会带着浏览器列表搜寻browserslist文件或package.json。嗖嗖将会从进程的工做目录,或者配置文件的目录开始查找,一直到系统跟目录。若是同时找到一个browserslist文件和一个配置package.json,将抛出异常。
若是找到了一个browserslist配置,而且定义了其余目标(但不是targets.browsers),则目标将按照与targets明肯定义的相同的方式合并targets.browsers。
npm
nom install --save-dev babel-preset-env
or yarn
yarn add babel-preset-env --dev
没有配置项将会运行全部转换
{ "presets": ["env"] }
有关设置preset的更多信息,请参阅preset插件配置文档
targets
{[string]: number | string}
, 默认为{}
提供环境版本的对象来支持
每一个目标浏览器都须要一个数字或者一个字符串(咱们建议在指定次要版本时使用字符串 node: "6.10"
)。
环境好比:chrome
,opera
,edge
,firefox
,safari
,ie
,ios
,android
,node
,electron
.
经过运行build-data脚本从compat-table获取,产生以上数据。
targets.node
number | string | "current" | true
若是你想根据当前node版本编译,能够指定node: true
或"node": "current"
,与"node":process.versions.node
是同样的。
targets.browsers
Array<string> | string
使用browserslist查询使用浏览器(ex: last 2 versions, > 5%),浏览器的选择结果将会被显示的放到targets中。
spec
bool,默认为false
启用更多的规范兼容性,但会致使presets中的转换变慢,以此来支持他们。
loose
bool,默认为false
为preset中的插件启用松散转换。
modules
"amd" | "umd" | "systemjs" | "commonjs" | false, defaults to "commonjs".
启用es6模块语法转换为另外一个模块类型。
设为false不会转换。
debug
bool,默认为false
输出使用的目标/插件,并在指定的版本插件数据版本来console.log。
include
Array<string>, defaults to []
用于包含一组插件
有效的选项包含:
babel 插件都包含,有前缀babel-plugin-transform-es2015-spread和无前缀transform-es2015-spread
内置插件,好比map set or Object.assign
若是当前的环境有问题,或者不支持或支持的很差的话,这个选项是颇有用的。
例如,node4支持classes但不支持其扩展功能,若是super与扩展参数一块儿使用,那么transform-classes是须要包含的,由于不能用super其余的方式来扩展.
note: include和exclude选项只工做于包含在preset里有的插件中。so,例如,包含proposal-do-expressions或者不包含proposal-function-bind将会报错。要使用preset里不包含的插件,请直接添加到您的配置中。
exclude
Array<string>,默认为[]用于排除和一处一组插件有效的配置同include选项。这个配置对于黑名单的翻译很是有用就像transform-regenerator,若是