//tips:新手翻译,欢迎指正

以兼容的形式把babel-preset-env嵌入到babel里面

这将更容易的废弃无用的代码,并与剩下的代码同步生产使用,本来呢,我不确定它能够比我预料的时间更早的被生产使用,所以,它在一个单独的分支下面,但是现在,这个分离使我很痛苦!

babel-preset-env

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结合到一起,表现的一致)

{"presets": ["env"]
}

你也可以通过配置polyfills和transforms来支持你所需要支持的浏览器,仅配置需要支持的语法来使你的打包文件更轻量级。

下面的例子,包括polyfills和代码,针对各个浏览器的最新的两个版本,以及safari的版本7及以上,针对以上两个条件的兼容情况进行代码转译。我们根据browserslist来分析具体的支持情况,所以,你可以用任何有效的browserslist查询格式来配置选项。

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

相同的,如果你的运行环境使node.js,你页可以配置babel-preset-env来支持一个特殊的node版本

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

为了更佳的方便,可以使用"node": "current"根据你运行时的node.js版本,挑选需要的polyfills和transforms来支持。

{"presets": [["env", {"targets": {"node": "current"}}]]
}
  • 如何工作

  • 安装

  • 用法

  • 配置项

  • 例子

  • 问题

如何工作

确定支持ECMAScript特定语法的环境

用外部数据例如:compat-table,来确定浏览器的支持情况。

我们会定期的跑build-data.js来更新plugins.json

参考:问题7

维护一个map在javascript特定语法与bable插件之间

目前存储在plugin-features.js
这样应该是被大多数人的要求所期待的,有很多的例子说插件集应该被分开,或者某一个插件不够足够独立(或不可能做到)。

babel支持所有的插件集的思想在babel-preset-latest被考虑进去

默认没有配置的表现同babel-preset-latest一样
不需要包含stage-x插件,env将提供所有的插件,支持到javascript最新的版本。

参考:问题14

确定最低的插件公共标准被包含在preset里

如果你target为IE8和chrome55,它将会包含ie8所需要的所有插件,你将来可能仍然会需要支持

支持target配置"node": "current"来解析当前运行额度node版本

例如,如果你bulid在node6上面,箭头函数没有被转换,如果运行在node0.12上面,将会被转

支持browsers配置就像自动加上前缀一样

利用browsers来声明支持的环境,通过设置参数,例如>1%, last 2 versions

参考:问题19
浏览器支持列表
browsers列出来在不同的浏览器上前端语言的支持情况,像工具比如autoprefixer style eslant-plugin-compat或者其他更多的

默认情况下,babel-preset-env会用browserlist config sources
例如,只需要对某个项目在兼容浏览器的最新两个版本以及IE10,仅仅需要这个条件下饿polyfills和plugins

.babelrc

{"presets": [["env", {"useBuiltIns": true}]]
}

browserslist

last 2 versions
IE 10

或者

package.json

"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,如果

babel-preset-env相关推荐

  1. JavaScript高级语法打包 - babel插件安装配置报错!Error: Cannot find module ‘@babel/preset-preset.env‘

    目录 1. 插件安装和配置 2. 运行打包 - 报错信息 3. 解决办法 1. 插件安装和配置 安装babel转换器相关的包: npm i babel-loader @babel/core @babe ...

  2. JavaScript的相关知识与问题

    最初的样子 一, 不理解的知识1. 高阶函数' 一,JS的基础 1.查看效果,审查元素-Console 2.声明变量必须使用var关键词 语法一var name;声明变量,uname默认值为undef ...

  3. 【已解决】Couldn‘t find preset “babel/preset-env“ relative to directory

    运行webpack报错 Couldn't find preset "babel/preset-env" relative to directory 解决方法: 1.首先检查是否将依 ...

  4. Babel:plugin、preset的区别与使用

    文章概览 本文主要内容包括:什么是Babel Plugin.Babel Preset,两者的区别与联系.如何使用plugin/preset.如何创建自定义preset.使用注意事项. 本文所有例子可在 ...

  5. 【异常】前端Babel提示 Support for the experimental syntax ‘jsx‘ isn‘t currently enabled

    一.报错内容 17:33:41 - Building for production... 17:34:13 ERROR Failed to compile with 5 errors5:34:09 P ...

  6. babel 7.0.0-0_我们即将接近7.0 Babel版本。 这是我们一直在做的所有很酷的事情。...

    babel 7.0.0-0 by Henry Zhu 朱Henry 我们即将接近7.0 Babel版本. 这是我们一直在做的所有很酷的事情. (We're nearing the 7.0 Babel ...

  7. 为什么我们删除Babel的舞台预设:实验性提案的明确选择加入

    by Henry Zhu 朱Henry 为什么我们删除Babel的舞台预设:实验性提案的明确选择加入 (Why We Removed Babel's Stage Presets: Explicit O ...

  8. html转换成抽象语法树,五分钟了解抽象语法树(AST)babel是如何转换的?

    抽象语法树 什么是抽象语法树? It is a hierarchical program representation that presents source code structure acco ...

  9. import,export的支持[nodejs]

    背景 最近重读阮老师的<ECMAScript 6 入门>,其中 module相关章节,使用import 时报错,测试环境node版本v8.10.0,使用如下代码如下: cat export ...

  10. Vue移动端项目——Vant 移动端 REM 适配

    Vant官方文档 Vant 中的样式默认使用 px 作为单位,如果需要使用 rem 单位,推荐使用以下两个工具: postcss-pxtorem 是一款 postcss 插件,用于将 px 单位转化为 ...

最新文章

  1. OpenCV代码提取:Windows上通过DShow获取Camera视频
  2. windows 下mysql的安装于使用(启动、关闭)
  3. Bootstrap table方法,Bootstrap table事件,配置
  4. 前端学习(1884)vue之电商管理系统电商系统之实现侧边栏的折叠和展开
  5. 微信小程序Wepy框架的三个事件交互($broadcast,$emit,$invoke)
  6. ruby+gem常用命令
  7. MySQL 到底能不能放到 Docker 里跑?
  8. labelme制作数据集:将标注好的json文件,转换成类似VOCdevkit数据集中的SegmentationClass(标注技巧)
  9. 打开浏览器网址方法(PyQt Qt for python)
  10. 如何优雅地给同事提“改进性建议”
  11. 独立游戏开发者---孤独前行的梦想家
  12. 【多元统计分析】01.多元统计的基础
  13. 大数据预测实战-随机森林预测实战(二)-随机森林回归模型
  14. 明净素雅-会议礼品送什么
  15. 通过路由器端口映射实现外网IP访问内网服务器
  16. ❤️爆肝十二万字《python从零到精通教程》,从零教你变大佬❤️(建议收藏)
  17. python实现最小二乘法的线性回归_Python中的线性回归与闭式普通最小二乘法
  18. echarts 之饼形图配置属性
  19. idea文档注释的快捷键带参数
  20. html5级联菜单,h5级联下拉、分类筛选

热门文章

  1. JS Array创建及concat()split()slice()使用
  2. 驱动重构SDN/NFV奠定未来网络基石
  3. 再谈IE的浏览器模式和文档模式[转]
  4. 【chrome插件】web版微信接入图灵机器人API实现自动回复
  5. table或者列表中超出的字用省略号代替的方法(支持IE6)
  6. 巧用ASP.NET预编译Web应用程序规避调用延迟,徐汇区网站设计
  7. Q127:PBRT-V3,理解“体渲染”积分器的关键竟然是这张图
  8. php 百科源码,php源码是什么意思
  9. C函数改写成汇编语言函数,帮忙将一个C函数写成汇编语言
  10. 交换机二级可以分流么_「网络安全」网络设备篇(2)——交换机