Lesson 7 / 30

@babel/preset-env: Smart Targeting

Use preset-env to automatically transpile only what your target browsers need.

Smart target detection

@babel/preset-env doesn't transpile everything. It inspects your .browserslistrc or targets config to determine what browsers you support, then only transpiles features those browsers don't have.

Configuring targets

Tell preset-env which browsers to support. Modern targets skip most transpilation; legacy targets transpile more.

// .babelrc - modern: skip transpilation
{
  "presets": [
    ["@babel/preset-env", { "targets": { "browsers": ["last 2 versions"] } }]
  ]
}

// .babelrc - legacy: transpile more
{
  "presets": [
    ["@babel/preset-env", { "targets": { "browsers": ["IE 11"] } }]
  ]
}

Use .browserslistrc for DRY config

Define your supported browsers once in .browserslistrc and share it across Babel, PostCSS, Autoprefixer, and other tools. No duplication.