babel-preset-env: a preset that configures Babel for you
转载
babel-preset-env is a new preset that lets you specify an environment and automatically enables the necessary plugins.
1. The problem
At the moment, several presets let you determine what features Babel should support:
babel-preset-es2015, babel-preset-es2016, etc.: incrementally support various versions of ECMAScript. es2015 transpiles what’s new in ES6 to ES5, es2016 transpiles what’s new in ES2016 to ES6, etc.
babel-preset-latest: supports all features that are either part of an ECMAScript version or at stage 4 (which basically means the same thing).
The problem with these presets is that they often do too much. For example, most modern browsers support ES6 generators. Yet, if you use babel-preset-es2015, generator functions will always be transpiled to complex ES5 code.
2. The solution
babel-preset-env works like babel-preset-latest, but it lets you specify an environment and only transpiles features that are missing in that environment.
Note that that means that you need to install and enable plugins and/or presets for experimental features (that are not part of babel-preset-latest), yourself.
On the plus side, you don’t need es20xx presets, anymore.
2.1 Browsers
For browsers you have the option to specify either:
- Browsers via browserslist query syntax. For example:
//Support the last two versions of browsers and IE 7+.
"babel": {
"presets": [
[
"env",
{
"targets": {
"browsers": ["last 2 versions", "ie >= 7"]
}
}
]
]
},
//Support browsers that have more than 5% market share.
"targets": {
"browsers": "> 5%"
}
//Fixed versions of browsers:
"targets": {
"chrome": 56
}
2.2 Node.js
If you compile your code for Node.js on the fly via Babel, babel-preset-env is especially useful, because it reacts to the currently running version of Node.js if you set the target "node" to "current":
"babel": {
"presets": [
[
"env",
{
"targets": {
"node": "current"
}
}
]
]
},
If you want to see this target in action, take a look at my GitHub repository async-iter-demo.
3. Additional options for babel-preset-env
This section gives a brief overview of additional options for babel-preset-env. For details, consult the [preset’s readme file] or doc for preset-env1.
3.1 modules (string, default: "commonjs")
This option lets you configure to which module format ES6 modules are transpiled:
- Transpile to popular module formats: "amd", "commonjs", "systemjs", "umd"
- Don’t transpile: false
3.2 include, exclude (Array of strings, default: [])
- include always enables certain plugins (e.g. to override a faulty native feature). It has the same effect as enabling plugins separately.
- exclude prevents certain plugins from being enabled.
3.3 useBuiltIns (boolean, default: false)
Babel comes with a polyfill for new functionality in the standard library. babel-preset-env can optionally import only those parts of the polyfill that are needed on the specified platform(s).
There are two ways of using the polyfill:
- core-js polyfills ES5, ES6+ as needed.
- Install polyfill: npm install core-js --save
- Activate polyfill: import "core-js";
- babel-polyfill polyfills core-js and the regenerator runtime (to emulate generators on ES5).
- Install polyfill: npm install babel-polyfill --save
- Activate polyfill: import "babel-polyfill";
Either of the two import statements is transpiled to an environment-specific sequence of more fine-grained imports. For example:
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";
Things to note:
- You should activate the polyfill exactly once in your program, e.g. in a “main” module.
- useBuiltIns means that less code is downloaded to the browser (bundle sizes become smaller). However, it does not save RAM, because the polyfill only installs what is missing.
For more on polyfilling the standard library, consult chapter “Babel: configuring standard library and helpers” in “Setting up ES6”.
3.4 debug (boolean, default: false)
Logs the following information via console.log():
- Targeted environments
- Enabled transforms
- Enabled plugins
- Enabled polyfills
Check the next section for sample output.
3.5 Example
The following example is taken from the preset’s readme file:
{
"presets": [
[ "env", {
"targets": {
"safari": 10
},
"modules": false,
"useBuiltIns": true,
"debug": true
}]
]
}
Modules are not transpiled. We can, e.g., rely on webpack to handle imports and exports for us.
The debug output is as follows:
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 {}
babel-preset-env: a preset that configures Babel for you的更多相关文章
- Error: Couldn't find preset "env" relative to directory "/Users/user/ethereumjs-vm"
运行npm run build时遇见这个问题,解决办法是安装: npm install --save-dev babel-preset-env 就解决了
- babel版本兼容报错处理:Plugin/Preset files are not allowed to export objects
原文地址: https://www.cnblogs.com/jiebba/p/9618930.html 1.为什么会报错 ? 这里抱着错误是因为 babel 的版本冲突. 多是因为你的 babel 依 ...
- Plugin/Preset files are not allowed to export objects,webpack报错/babel报错的解决方法
1.为什么会报错 ? 这里抱着错误是因为 babel 的版本冲突. 多是因为你的 babel 依赖包不兼容. 可以查看你的 package.json 的依赖列表 即有 babel 7.0 版本的( @ ...
- babel入门基础
背景 babel的官网说babel是下一代的js语法编译器,现在自己也在很多项目中使用了babel,可是自己对babel的认识呢,只停留在从google和别人项目中copy的配置代码上,内心感到很不安 ...
- WebStorm ES6 语法支持设置&babel使用及自动编译
一.语法支持设置 Preferences > Languages & Frameworks > JavaScript 二.Babel安装 1.全局安装 npm install -g ...
- babel基本用法
babel-cli babel-cli是本地使用编译js文件 1.安装: cnpm i babel-cli babel-preset-env -D 2.配置packjson: "script ...
- 《前端之路》之 Babel 下一代 JavaScript 语法编译器
写本章的内容的出发点主要是 为了对于之前关于 JS 版本的一个总结,在之前的开发中,我们始终对于 ECMAScript 的版本的更新不够重视,以至于在后面的 开发过程中,我们始终会被各种新奇的语法打断 ...
- 前端笔记之ES678&Webpack&Babel(上)初识ES678&Babel&let和const&解构&语法
一.ES版本简介和调试运行方法 1.1 ECMAScript简介 MDN手册:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript JavaS ...
- 大前端的自动化工厂(3)—— babel
一. 关于babel babel是ES6+语法的编译器,官方网址:www.babeljs.io,用于将旧版本浏览器无法识别的语法和特性转换成为ES5语法,使代码能够适用更多环境. 最初的babel使用 ...
随机推荐
- 程序与程序之间共享对象:MarshalByRefObject
源自于:http://stackoverflow.com/questions/439173/message-pumps-and-appdomains/442316 程序与程序之间共享对象: Marsh ...
- easyui -validatebox 验证框加载
问题: easyui验证狂框有时会验证输入字符的位数,或者验证有效字符组合 解决: 使用easyui的验证框,继承验证框,指定输入框为验证框即可 $(function(){ $.extend($.fn ...
- dalao自动报表邮件2.0
经过昨天的修改优化后,dalao收到了不是“木马”的邮件,欣慰地点了点头,“不错,不错,这几张表设计的简洁明了,看着有货!不过呀,,,这些表的数据太多了一点,十几天的数据一大溜,能不能再简洁一点,做一 ...
- day03 作业 and 周末作业
请输出 name 变量对应的值中 "e" 所在索引位置? # name = "leX leNb"# num = 0# while num < len(na ...
- IBM基于Kubernetes的容器云全解析
基于Kubernetes的容器云 容器云最主要的功能是以应用为中心,帮助用户把所有的应用以容器的形式在分布式里面跑起来,最后把应用以服务的形式呈现给用户.容器云里有两个关键点,一是容器编排,二是资源调 ...
- [T-ARA][Lovey-Dovey]
歌词来源:http://music.163.com/#/song?id=22704426 作曲 : 新沙洞老虎/崔圭成 [作曲 : 新沙洞老虎/崔圭成] [作曲 : 新沙洞老虎/崔圭成] 作词 : 新 ...
- 用vsstudio 设计Winform 高分屏上布局错乱的问题
在使用win10高分辨率150%,200%系统进行winform开发时, 会有布局错乱的现象,比如之前定义的300px的宽度,往往被设置成600px (200%分辨率下). 这个问题vs2015的解决 ...
- 转载笔记:DropDownList无限级分类(灵活控制显示形式)
主要使用递归实现,数据库结构: 最终样式: 1protected void Page_Load(object sender, EventArgs e) 2 { 3 if (!Pa ...
- ES6的新特性(14)——Iterator 和 for...of 循环
Iterator 和 for...of 循环 Iterator(遍历器)的概念 JavaScript 原有的表示“集合”的数据结构,主要是数组(Array)和对象(Object),ES6 又添加了Ma ...
- 深度系统(deepin)与win10双系统切换设置
之前在win10下安装了深度系统,我不知道其他人在双系统切换的时候是否需要更改BIOS参数,我根据我的实际情况给出双系统切换设置的解决方案. 1.开机后进入选项System setup 2.按照下图选 ...