转载

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:

//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的更多相关文章

  1. Error: Couldn't find preset "env" relative to directory "/Users/user/ethereumjs-vm"

    运行npm run build时遇见这个问题,解决办法是安装: npm install --save-dev babel-preset-env 就解决了

  2. babel版本兼容报错处理:Plugin/Preset files are not allowed to export objects

    原文地址: https://www.cnblogs.com/jiebba/p/9618930.html 1.为什么会报错 ? 这里抱着错误是因为 babel 的版本冲突. 多是因为你的 babel 依 ...

  3. Plugin/Preset files are not allowed to export objects,webpack报错/babel报错的解决方法

    1.为什么会报错 ? 这里抱着错误是因为 babel 的版本冲突. 多是因为你的 babel 依赖包不兼容. 可以查看你的 package.json 的依赖列表 即有 babel 7.0 版本的( @ ...

  4. babel入门基础

    背景 babel的官网说babel是下一代的js语法编译器,现在自己也在很多项目中使用了babel,可是自己对babel的认识呢,只停留在从google和别人项目中copy的配置代码上,内心感到很不安 ...

  5. WebStorm ES6 语法支持设置&babel使用及自动编译

    一.语法支持设置 Preferences > Languages & Frameworks > JavaScript 二.Babel安装 1.全局安装 npm install -g ...

  6. babel基本用法

    babel-cli babel-cli是本地使用编译js文件 1.安装: cnpm i babel-cli babel-preset-env -D 2.配置packjson: "script ...

  7. 《前端之路》之 Babel 下一代 JavaScript 语法编译器

    写本章的内容的出发点主要是 为了对于之前关于 JS 版本的一个总结,在之前的开发中,我们始终对于 ECMAScript 的版本的更新不够重视,以至于在后面的 开发过程中,我们始终会被各种新奇的语法打断 ...

  8. 前端笔记之ES678&Webpack&Babel(上)初识ES678&Babel&let和const&解构&语法

    一.ES版本简介和调试运行方法 1.1 ECMAScript简介 MDN手册:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript JavaS ...

  9. 大前端的自动化工厂(3)—— babel

    一. 关于babel babel是ES6+语法的编译器,官方网址:www.babeljs.io,用于将旧版本浏览器无法识别的语法和特性转换成为ES5语法,使代码能够适用更多环境. 最初的babel使用 ...

随机推荐

  1. 20155216 2016-2017-2 《Java程序设计》第二周学习总结

    教材学习内容总结 类型 short占2字节 int占4字节 long占8字节 byte占1字节,可表示-128~127的整数 char占2字节 boolean不考虑占字节 float占4字节 doub ...

  2. 20155318 2016-2017-2 《Java程序设计》第十周学习总结

    20155318 2016-2017-2 <Java程序设计>第十周学习总结 教材学习内容总结 学习目标 了解计算机网络基础 掌握Java Socket编程 理解混合密码系统 掌握Java ...

  3. 2017-2018-1 20155320 《信息安全系统设计基础》第四周学习总结(课堂实践补交+myhead与mytail加分项目)

    2017-2018-1 20155320 <信息安全系统设计基础>第四周学习总结(课堂实践补交+myhead与mytail实现) 课堂实践内容 1 参考教材第十章内容 2 用Linux I ...

  4. mfc通过MapWinGIS控件读取shp文件(不通过#import实现)

    1.首先注册MapWinGIS ActiveX组件, 引入MapWinGIS.ocx产生的MapWinGIS_i.h和MapWinGIS_i.c文件,利用CoCreateInstance函数来调用 演 ...

  5. Luogu1445 [Violet]樱花

    题面 题解 $$ \frac 1x + \frac 1y = \frac 1{n!} \\ \frac{x+y}{xy}=\frac 1{n!} \\ xy=n!(x+y) \\ xy-n!(x+y) ...

  6. 1126: [POI2008]Uci

    1126: [POI2008]Uci https://lydsy.com/JudgeOnline/problem.php?id=1126 分析: dp.状态很妙,就是有点难写. 能走的是一个矩形.首先 ...

  7. MySQL入门篇(七)之Xtrabackup备份与恢复

    一.Xtrabackup介绍 MySQL冷备.mysqldump.MySQL热拷贝都无法实现对数据库进行增量备份.在实际生产环境中增量备份是非常实用的,如果数据大于50G或100G,存储空间足够的情况 ...

  8. equals和==方法比较(三)--Long中LongCache源码分析

    下面我们来分析,上篇博客中遗留的问题,为什么下方的两个一个是true,两一个是false那? //true Long l1=123l; Long l2=123l; System.out.println ...

  9. 如何快速解决MySQL 1032 主从错误

    3分钟解决MySQL 1032主从错误 Part1:写在最前1032错误----现在生产库中好多数据,在从库误删了,生产库更新后找不到了,现在主从不同步了,再跳过错误也没用,因为没这条,再更新还会报错 ...

  10. 面向 Unity* 软件和虚拟现实的优化:运行时生成内容

    优化游戏以实现高性能一直是游戏开发过程中的一个重要因素.虽然开发人员一直尝试将硬件推向极致,但当移动游戏成为主流时,优化技术变得尤为突出.Unity* 软件.Unreal* 等常见引擎最初都是面向 P ...