How to list what transforms @ babel /preset -env includes?

When addressing this question, first understand that @babel/preset-env is an intelligent preset of Babel that allows you to use the latest JavaScript syntax without manually managing which transformations and polyfills you need. It automatically determines the required transformations and polyfills based on the target environment.

To identify the transformations included in @babel/preset-env, follow these steps:

1. Configure Babel

First, ensure you have installed @babel/core and @babel/preset-env. If not, install them using npm or yarn:

bash
npm install --save-dev @babel/core @babel/preset-env

2. Query Transformations

Method 1: Using Babel CLI

Generate a list of all transformations using the Babel command-line interface. Use the following command:

bash
npx babel --presets @babel/preset-env --plugins

This command displays the plugin list applied by @babel/preset-env based on your current configuration.

Method 2: View Documentation and Source Code

Visit Babel's official documentation and GitHub repository to examine the source code of @babel/preset-env and understand how it dynamically adjusts included plugins based on different configurations. Babel's official documentation is available at Babel Docs, and the GitHub repository is at Babel GitHub.

3. Example

For example, if your project needs to support older browsers, @babel/preset-env will include plugins that convert ES6 syntax (such as arrow functions, const/let, etc.) to ES5.

4. Using babel.config.js

Create or edit babel.config.js in your project's root directory to specify the target environment:

javascript
module.exports = {
  presets: [
    ['@babel/preset-env', {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      },
    }],
  ],
};

After this configuration, @babel/preset-env will determine the specific transformations needed based on the specified browser versions.

5. Practical Application

During development, adjust the targets field to control the scope and types of transformations, tailoring them to your project's needs. This effectively reduces the size of the final bundle and improves the project's runtime performance.

This covers several methods to identify the transformations included in @babel/preset-env, and I hope it helps you!