Lable-preset -env, turns ES2015 + to ES5 by automatically confirming the required Babel and polyfills according to the target browser or run environment.
Bleed-preset -env behavior and babel-preset-latest (or babel-preset- ES2015, babel-preset- ES2016, Identical to babel-PRESET – ES2017 set).
{
"presets": ["env"]
}
Copy the code
However, we don’t recommend using it this way because it completely fails to take advantage of its browser-specific power. You can configure it to contain only the polyfills and transformations required by the browsers you want to support. Compiling only what is needed makes packages smaller and simpler.
The following example only includes polyfills and transcoding required by users with coverage of 0.25%, ignoring IE11 and Opera Mini. We use Browserslist to parse this information. So you can use Browserslist to look up any valid information
{ "presets": [ ["env", { "targets": { // The % refers to the global coverage of users from browserslist "browsers": [" > 0.25% ", "not ie 11", "not op_mini all"]]]}}}Copy the code
You can also specify the browser version instead of using a query with {“target”:{” Chrome “:”52”}}. If your target is Node.js and not a browser, you can configure babel-preset-envt to include only polyfills and code-transitions required for a particular version
{" presets ": [[" env" {" targets ": {" node" : "6.10"}}]]}Copy the code
For convenience, you can use node:current to include only the version of Node.js used to run Babel.
{
"presets": [
["env", {
"targets": {
"node": "current"
}
}]
]
}
Copy the code
More options
-
How does it work
-
Install
-
Usage
-
Options
-
Examples
-
Caveats (Caution)
The installation
npm install --save-dev babel-preset-env
Copy the code
or
yarn add babel-preset-env --dev
Copy the code
Default behavior with no options runs all conversions
{ "presets": ["env"]}
Copy the code
options
See the Plugin/Preset Options documentation for more information
targets
{[string] : number | string}, {} on by default.
Gets the version of the environment variable to support
Use a number or string for each target environment (we recommend using strings such as Node :’6.10′ when developing a secondary version)
Example environment: Chrome, Opera, Edge, Firefox, Safari, IE, ios, Android, Node, Electron.
targets.node
number | string | “current” | true
If you want to compile against the current node version, you can set it to node:true or node:”current” so that the configuration is the same as process.versions.node.
targets.browsers
Array | string
targets.uglify
Copy the code
true
Use Uglip-JS to shrink the code
When using Uglip-JS to shrink code, because UGlip-S does not support any ES2015+ syntax, you may encounter syntax errors when targeting future browsers.
To prevent these errors – set the Uglify option to true, which will enable all conversion plug-ins, so your code will compile fully to ES5. However, the useBuiltIns option will still work as before and only contain the polyfills required by the target.
Uglify supports ES2015 syntax through UGlip-ES. If you are using a syntax not supported by Uglify ES, we recommend you use Babel-minify.
Note: This option was deprecated in 2.x and replaced with the forceAllTransforms option
spec
boolean, defaults to false.
Any plug-ins that support them in this default enable a more compliant, but possibly slower, transformation.
loose
boolean, defaults to false.
Enable “loose” transformations for any plug-ins that allow them in this default.
modules
Systemjs umd “amd” | “” |” “| |” commonjs “false,” commonjs “by default.
Enable ES6 module syntax conversion to another module type. Setting this to false does not convert modules.
debug
Boolean. Default is false.
Outputs to the console the target/plug-in used and the version specified in the plug-in data version
include
The Array, default [].
Always contain an array of plug-ins.
exclude
The Array, default [].
An array of plug-ins to always exclude/remove.
useBuiltIns
boolean, defaults to false.
One way to apply babel-preset-env to polyfill (via “babel-polyfill”).
Note: This is not what the current Polyfill experiment /stage-x built-in does like the regular “Babel-Polyfill”. This only works with NPM >=3 (at least with babel6)
npm install babel-polyfill –save
This option enables a new plug-in that replaces the statement import “babel-polyfill” or require(“babel-polyfill”) with the individual requires of context-based babel-polyfill.
Note: use require(“babel-polyfill”) only once throughout the application. Multiple imports will throw an error because it can cause global conflicts and other hard-to-trace problems. We recommend creating a single-entry file that contains only the REQUIRE statement.
Examples
Export to various targets
export class A {}
Copy the code
Only for Chrome 52
.babelrc
{
"presets": [
["env", {
"targets": {
"chrome": 52
}
}]
]
}
Copy the code
Out
class A {}
exports.A = A;
Copy the code
Target Chrome 52 with WebPack 2/ Summary and Loose modes
.babelrc
{
"presets": [
["env", {
"targets": {
"chrome": 52
},
"modules": false,
"loose": true
}]
]
}
Copy the code
Out
export class A {}
Copy the code
Target a specific browser through Browserslist
.babelrc
{
"presets": [
["env", {
"targets": {
"chrome": 52,
"browsers": ["last 2 versions", "safari 7"]
}
}]
]
}
Copy the code
Out
export var A = function A() {
_classCallCheck(this, A);
};
Copy the code
By setting node: true or node: “current”
.babelrc
{
"presets": [
["env", {
"targets": {
"node": "current"
}
}]
]
}
Copy the code
Out
class A {}
exports.A = A;
Copy the code
Setting debug Output
.babelrc
{
"presets": [
[ "env", {
"targets": {
"safari": 10
},
"modules": false,
"useBuiltIns": true,
"debug": true
}]
]
}
Copy the code
stdout
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 {}
Copy the code
Set include and exclude to specify plugins/built-in
Always replace arrow functions, exclude generators
{
"presets": [
["env", {
"targets": {
"browsers": ["last 2 versions", "safari >= 7"]
},
"include": ["transform-es2015-arrow-functions", "es6.map"],
"exclude": ["transform-regenerator", "es6.set"]
}]
]
}
Copy the code
Refer to the link: www.npmjs.com/package/bab…