babel-preset-env

What is babel-preset-env?

babel-preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). It automatically determines the Babel plugins and polyfills you need based on your supported environments.

What are babel-preset-env's main functionalities?

Automatic Polyfilling

Automatically includes polyfills for the features you use based on your target environments. The 'useBuiltIns' option set to 'usage' ensures that only the necessary polyfills are included.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

Targeting Specific Environments

Allows you to specify the environments you want to support. The 'targets' option lets you define the browsers or Node.js versions you want to transpile your code for.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": [
            "> 1%",
            "last 2 versions",
            "not ie <= 8"
          ]
        }
      }
    ]
  ]
}

Debugging

Enables debug mode to print useful information about the targets and plugins being used. This helps in understanding what transformations are being applied.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "debug": true
      }
    ]
  ]
}

Other packages similar to babel-preset-env

@babel/preset-react

@babel/preset-react is a Babel preset that includes plugins needed to transform React JSX syntax. It is specifically tailored for React applications, whereas babel-preset-env is more general-purpose.

@babel/preset-typescript

@babel/preset-typescript is a Babel preset that allows Babel to transform TypeScript code into JavaScript. It focuses on TypeScript syntax, while babel-preset-env focuses on modern JavaScript features.

core-js

core-js is a library that provides polyfills for modern JavaScript features. While babel-preset-env can automatically include core-js polyfills based on usage, core-js itself is a standalone library for polyfilling.

README

[WIP 0.0.0] babel-preset-env

Babel preset for all envs.

Install

$ npm install --save-dev babel-preset-env

Usage via .babelrc

Options

• targets - an object of browsers/environment versions to support. The data for this is currently at: https://github.com/babel/babel-preset-env/blob/master/src/plugins.js (It would be nice to move this to use a data source like kangax.github.io/compat-table). And we would like help to make the data is correct!
• loose - Enable "loose" transformations for any plugins in this preset that allow them (Disabled by default).
• modules - Enable transformation of ES6 module syntax to another module type (Enabled by default to "commonjs").
  • Can be false to not transform modules, or one of ["amd", "umd", "systemjs", "commonjs"]

{
  "presets": [
    ["env", {
      "targets": {
        "chrome": 52
      },
      "loose": true,
      "modules": false
    }]
  ]
}