babel-preset-env is a new preset which let you specify an environment and automatically enables the necessary plugins.

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. babel-preset-es2015 transpiles what’s new in ES6 to ES5, babel-preset-es2016 transpiles what’s new in ES7 to ES6.

  • babel-preset-latest: supports all features that are either part of an ECMAScript version or at stage 4.

The problem with these presets is that they often do too much. For example, most modern browsers support ES6 generator. Yet if you use babel-preset-es2015, generator functions will always be transpiled to complex ES5 code.

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 you need to install and enable plugins and/or presets for experimental features(that are not part of babel-preset-latest)

On the plus side, you don’t need es2015 presets anymore.

Browsers

For browsers you have the option to specify either:

  • Browsers via browserslist query syntax

    • Support the last two versions of browsers and IE 7+

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      "babel": {
        "presets": [
          [
            "env",
            {
              "targets": {
                "browsers": ["last 2 versions", "ie >= 7"]
              }
            }
          ]
        ]
      }

    • Support browsers that have more than 5% market share

      1
      2
      3
      "targets": {
        "browsers": "> 5%"
      }

    • Fixed versions of browsers:

      1
      2
      3
      "targets": {
        "chrome": 56
      }

Node.js

If you compile your code for Node.js on the fly via Babel, babel-preset-env is especially useful, because it react to the currently running version of Node.js if you set the target node to current

1
2
3
4
5
6
7
8
9
10
11
12
13
14
"babel": {
  "presets": [
    [
      "env",
      {
        "target": {
          "targets": {
            "node": "current"
          }
        }
      }
    ]
  ]
}

Additional Options for babel-preset-env

modules(string, default: ‘commonjs’)

This options lets you configure to which module format ES6 modules are transpiled:

  • Transpile to popular module formats: ‘amd’, ‘commonjs’, ‘systemjs’, ‘umd’

  • Don’t transpile: false

include, exclude (Array of strings, default [])

  • include: always enables certain plugins

  • exclude: prevents certain plugins from being enabled

useBuiltIns (boolean, default: false)

Babel comes with a polyfill for new functionality in standard library. babel-preset-env can optionally import only those parts of the polyfill that are needed on the specified platforms:

There are two ways of using the polyfill:

  • core-js polyfills ES5, ES6+ as needed

    • install polyfill: yarn add core-js

    • activate polyfill: import 'core-js'

  • babel-polyfill: polyfills core-js and regenerator runtime(to emulate generators on ES5)

    • install polyfill: yarn add babel-polyfill

    • activate polyfill: import 'babel-polyfill'

Either of the two import statements is transpiled to an environment-specific sequence of more fine-grained imports:

1
2
3
4
5
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";

debug (boolean, default: false)

Logs the following information via console.log()

  • Targeted environments

  • Enabled transformers

  • Enabled plugins

  • Enabled polyfills

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "presets": [
    ["env",
      {
        "targets": {
          "safari": 10
        },
        "modules": false,
        "useBuiltIns": true,
        "debug": true
      }
    ]
  ]
}