Babel has become a must-have toolchain for front-end engineering development, and @babel/preset-env(prefixes @babel and preset after Babel7.0) is a common set of preset plug-ins. This article is a translation of @babel/preset-env, and the preset level is limited

@babel/preset-env

@babel/preset-env is an intelligent Babel preset that lets you use the latest JavaScript syntax, it will help you convert to the syntax supported by the target runtime environment of your code, improve your development efficiency and make the packaged code smaller

The installation

The use of NPM

npm install --save-dev @babel/preset-env
Copy the code

The use of yarn

yarn add @babel/preset-env --dev
Copy the code

Operation mechanism

@babel/preset-env relies on some good open source projects like Browserslist, compat-table, electro-to-chromium…

We use these data sources to maintain and enhance the syntax transformation and implementation of Babel to support the syntax and characteristics of the corresponding version of the target environment

Note that @babel/preset-env does not support stage-x plug-ins

@babel/preset-env uses any target environment you specify, check their corresponding plug-ins and pass them to Babel

Browser List collection

For browser-based or Electron projects, we recommend using a.browserslistrc file to specify the compile target. If you already have this configuration file, it will be used by a number of pre-engineered ecology tools, such as autoprefixer, stylelint, eslint-plugin-compat…

If there is no configuration the targets or ignoreBrowserslistConfig, @ Babel/preset – env will use the default Browserslist configuration

If you want to support syntax conversions and syntax implementations for browsers that have more than 0.25% market share and ignore security updates, such as IE 10 and BlackBerry, you can use the following configuration

{
  "presets": [["@babel/preset-env",
      {
        "useBuiltIns": "entry"}}]]Copy the code

.browserlistrc

> 0.25%
not dead
Copy the code

Or you can configure it in package.json

"> < span style = "max-width: 100%; clear: both;Copy the code

Configuration items

If you want more documentation on configuration items and presets, refer to the Preset Options documentation

targets

Data types: string | Array < string > | {[string] : string}, {} by default

Describe the target environment that your project supports

This can be a Browserslist-compatible query statement

{
  "targets": "> 0.25%, not dead." "
}
Copy the code

Or an object that describes the smallest supported version of the environment

{
  "targets": {
    "chrome": "58"."ie": "11"}}Copy the code

Environment: Chrome, Opera, Edge, Firefox, Safari, IE, ios, Android, Node, Electron

Note that if targets is not specified, @babel/prest-env will convert all ECMAScript 2015+ code to its default configuration

We don’t recommend this because it doesn’t take advantage of its ability to support specific browsers

{
  "presets": ["@babel/preset-env"]}Copy the code
targets.esmodules

Data type: Boolean

If your code is running in a browser that supports ES Modules(www.ecma-international.org/ecma-262/6….) , when specifying the following configuration, browers fields will be ignored, you can cooperate with < script type = “module” > < / script > dedicated to provide users with more small size code file (jakearchibald.com/2017/es-mod…).

Note: F you specify the esmodules compiler target this way, the Browsers field is ignored

{
  "presets": [["@babel/preset-env",
      {
        "targets": {
          "esmodules": true}}]]}Copy the code
targets.node

Data types: string | | “current” true

If you are compiling for the current node version, you can specify the Node configuration item. If you specify curren, this is equivalent to “node”: process.versions.node

targets.safari

Data types: string | “tp”

If you are compiling the Technology Preview version of Safari, you can specify “Safari “:” TP”

targets.browsers

Data types: string | Array < string >

A query option using BrowserList, such as last 2 versions, > 5%, Safari TP

Note that the results of browsers are overwritten by conflicting projects in targets

Note: this configuration item will be removed in later versions in favor of just setting targets as a query statement

spec

Data type: Boolean, false by default

Configure any plug-ins or presets that are allowed but potentially slow

loose

Data type: Boolean, false by default

Allows loose transformations or defaults

modules

Umd data types: “amd” | “” |” systemjs “|” commonjs “|” CJS “| |” auto “false, the default value is” auto”

Allows conversion of ES6 module syntax to other module types

Setting it to false will not convert modules

Note that CJS is an alias for CommonJS

debug

Data type: Boolean, false by default

Console. log outputs the version specified in plugin data version for the compilation target or the plug-in used

include

Data type: Array < string | RegExp >, the default for []

An array of frequently contained plug-ins

Valid configurations include:

  • Babel plugins.@babel/plugin-transform-spreadAnd unprefixedplugin-transform-spreadAll support
  • Built-in (also supportedcores-js@2andcores-js@3, such ases.map.es.setOr,es.object.assign)

Plug-in names can be specified in whole or in part, or using regular expressions

Acceptable input:

  • The full name (string) :"es.math.sign"
  • Partial name (string) :"es.math.*"A. all b. all Ces.mathPlugins prefixed with)
  • Regular (Object) :/^transform-.*$/ornew RegExp("^transform-modules-.*")

Pay attention to the above regular expression. It’s like matching all characters, not just. Note also that the.* in regular expressions is the opposite of the * in glob

This option is useful for debugging if a native implementation or section combines unsupported features and the supported features fail

For example, Node 4 supports native classes but does not support spread. If super is used with the spread parameter, @babel/plugin-transform-classes needs to be included, otherwise it cannot be translated

Note: The include and exclude options only take effect if the plugin is included by default, so, for example, including @babel/plugin-proposal-do-expressions, If @babel/plugin-proposal-function-bind is excluded, an error will be reported. If you want to use plugins that are not included in the default, add them directly to your plugins

exclude

Data type: Array < string | RegExp >, the default for []

An array of plug-ins that are not included or removed

The possible configuration is similar to the include option

This option is equivalent to a blacklist if you are not using generators and do not want to include regeneratorRuntime when configuring useBuiltIns, or replace Babel’s Async-to-Gen with another plugin such as fast-Async

useBuiltIns

Data type: “usage” | | “entry” false, false by default

This option configures @babel/preset-env how to handle polyfill

When the Usage or entry option is used, @babel/preset-env will directly drink the cores-js module equivalent to exposed imports or Requries, where core-js will be parsed directly into the file itself and need to be accessible

Since @babel/polyfill is deprecated in Babel 7.4.0, we recommend adding core-js directly and setting the version via the Corejs option

npm install core-js@3 --save

# or

npm install core-js@2 --save
Copy the code

useBuiltIns: 'entry'

Note: you can only use import “core-js “and import” regenerator-Runtime /runtime” once in your entire app. If you’re using @babel/polyfill, it already includes core-js and regenerator-Runtime: introduce it more than once or you’ll get an error. Introducing these packages multiple times can lead to global conflicts and other difficult-to-trace problems. We recommend creating a single entry file that contains only import declarations

When you need to introduce different core-JS for different context-based entry points, This option allows a new plug-in to replace the import “core-js/stable” and import “Regenerator-runtime /runtime” statement (or require(“corejs”) or require(” regenerator-Runtime /runtime”)

In

import "core-js";
Copy the code

Out(Based on different environments)

import "core-js/modules/es.string.pad-start";
import "core-js/modules/es.string.pad-end";
Copy the code

The introduction of “core-js” loads syntactic padding for every possible ECMAScript feature, if you know you only need a certain part of them, and when used with core-js@3 and @babel/preset-env, can optimize every core-JS entry and its dependencies. For example, you see values that need to be populated with array methods and the new Math proposal:

In

import "core-js/es/array";
import "core-js/proposals/math-extensions";
Copy the code

Out(Based on different environments)

import "core-js/modules/es.array.unscopables.flat";
import "core-js/modules/es.array.unscopables.flat-map";
import "core-js/modules/esnext.math.clamp";
import "core-js/modules/esnext.math.deg-per-rad";
import "core-js/modules/esnext.math.degrees";
import "core-js/modules/esnext.math.fscale";
import "core-js/modules/esnext.math.rad-per-deg";
import "core-js/modules/esnext.math.radians";
import "core-js/modules/esnext.math.scale";
Copy the code

You can read the core-JS documentation for information about the different entries

Note: @babel/preset-env will also be introduced to @babel/polyfill when using core-js@2(using the corejs: 2 configuration item or used implicitly). This behavior is deprecated because it is impossible to use a different version of Core-JS than @babel/polyfill

useBuiltIns: 'usage'

When the file is used, we add a specific import to the syntax fill, we use it, a packaged file will only load the same syntax fill once

In

a.js

var a = new Promise(a);Copy the code

b.js

var b = new Map(a);Copy the code

Out(if the environment requires syntactic padding)

import "core-js/modules/es.promise";
var a = new Promise(a);Copy the code
import "core-js/modules/es.map";
var b = new Map(a);Copy the code

Out(if the environment supports the syntax)

var a = new Promise(a);Copy the code
var b = new Map(a);Copy the code

useBuiltIns: false

Do not automatically add syntactic padding to every file. Do not convert import “core-js” and import “@babel/polyfill” to separate syntactic padding

corejs

Data structure: 2, 3 or {version: 2 | 3, proposals: Boolean}, the default is 2

This option will only work if used with useBuiltIns: Usage or useBuiltIns: Entry, make sure @babel/preset-env injects the correct presets for your core-JS version

By default, only stable ECMAScript syntactic padding is injected. You can do this in three ways:

  • When usinguseBuiltIns: "entry", you can just introduce oneproposal polyfill: import "core-js/proposals/string-replace-all"