babel-preset-env: a preset that configures Babel for you
2017-10-27 17:45
375 查看
转载
babel-preset-env is a new preset that lets you specify an environment and automatically enables the necessary plugins.
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.
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.
Browsers via browserslist query syntax. For example:
If you want to see this target in action, take a look at my GitHub repository async-iter-demo.
Transpile to popular module formats: "amd", "commonjs", "systemjs", "umd"
Don’t transpile: false
exclude prevents certain plugins from being enabled.
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:
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”.
Targeted environments
Enabled transforms
Enabled plugins
Enabled polyfills
Check the next section for sample output.
Modules are not transpiled. We can, e.g., rely on webpack to handle imports and exports for us.
The debug output is as follows:
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错误翻译fetch语法配置
- Typically this problem occurs when you are putting in a data that is too long for the column. In t
- babel && babel-preset-env
- you must specify at least one already-initialized correlation set for a non-activation receive that is on a non-selfcorrelating port。
- Plan for apps for SharePoint 2013(You need to ensure that users can install apps from the App Catal)
- Building Applications with Force.com and VisualForce(Dev401)(十):Designing Applications for Multiple Users: Building Business Processes that You Want
- 你好babel-preset-env,再见babel-preset-2015
- Gradle build-info.xml not found for module app. Please make sure that you are using gradle plugin '2
- You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use
- You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near
- babel-preset-env使用介绍
- 125.You want to check the details of few errors that users have reported. You search for the alert l
- babel-preset-env使用指南
- 40.You have statistics collected for some selected tables. Your requirement is that the statistics
- You asked for an OpenJDK 7 build but your version is java version "1.7.0_72" Java(TM) SE Runtime Env
- MySql 执行语句错误 Err] 1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near
- ssh开发中插入数据时遇到 You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right
- java.sql.SQLException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for
- 插入mysql语句报错:1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near
- use `xcode-select --switch path/to/Xcode.app` to specify the Xcode that you wish to use for command