liveBook · Manning

Babel preset-env

As explained in Web Components in Action

Babel preset-env is a Babel configuration preset that selects syntax transformations based on target JavaScript environments.

Babel preset-env provides a standard Babel configuration for transpiling newer JavaScript into older JavaScript, especially when supporting Internet Explorer, which lacks features such as classes and fat arrow functions. section 12.5

A practical IE build uses the preset as part of a separate compatibility output:

  • Install @babel/core, @babel/cli, and @babel/preset-env as development dependencies. section 12.5
  • Add {"presets":["@babel/preset-env"]} to the Babel configuration. section 12.5
  • Run Babel against the bundled component and write an IE-compatible output file. section 12.5

Separate modern and IE builds

A project can keep a modern module build while generating slider.build.js, coordpicker.build.js, and colorpicker.build.js through Babel. An npm build-ie script runs those transpilation steps; the overall build combines Rollup bundling with the IE build. section 12.5

npm install --save-dev @babel/core

npm install --save-dev @babel/cli

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

Review the development-dependency commands for the Babel core, CLI, and preset-env packages. section 12.5

How Web Components in Action covers it

How deep it goes
Shows installation, minimal configuration, CLI invocation, and npm build integration, but defers detailed Babel plugin configuration.
Examples
Uses component bundles, Babel configuration, npm scripts, and separate modern and IE output files.
What it assumes
Assumes npm-based build tooling and distinguishes transpilation from the separate module-bundling work performed by Rollup.
What you can do after
Apply it via Babel CLI to generate older-JavaScript component builds for Internet Explorer.
How it connects
Connects Babel preset-env with transpilation, Babel CLI, Rollup, JavaScript modules, and Internet Explorer compatibility.

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Web Components in Action. The section links point to the parts of the book it draws on.