Glossary / Babel

Babel

Babel is a configurable JavaScript compiler commonly used to transform syntax, JSX, and other language extensions into code suitable for selected runtimes. It consists of parser, plugin, and preset layers; it does not automatically bundle modules or polyfill every missing Web API.

Configuration model

Plugins implement specific transforms; presets group plugins and configuration. @babel/preset-env selects syntax transforms based on configured targets and can coordinate polyfill injection when explicitly configured with an appropriate strategy. Babel may preserve ESM for a bundler or transform modules to CommonJS, changing what downstream tools can analyze. Configuration can be project-wide or file-scoped, and monorepo config resolution can surprise when files are outside the root package.

Babel's helper strategy can inline helpers or import shared helpers. JSX and decorators require decisions about runtime and proposal/standard syntax semantics. Source map generation must be enabled and composed through later transforms.

What Babel does not do by itself

Babel does not type-check TypeScript, resolve arbitrary aliases at runtime, bundle a graph, or guarantee that missing built-in APIs exist. TypeScript syntax can be stripped with Babel, but semantic type errors require tsc or another checker. Runtime polyfills must be explicitly chosen and targeted to the supported environments.

Engineering guidance

Prefer a minimal target-driven config. Preserve ESM until the bundler when tree shaking is desired. Avoid overlapping Babel and bundler transforms without a reason. Test config on representative files and the oldest supported runtime; inspect output when changing decorators, class fields, or polyfill strategy.

Interview questions

  1. Babel vs bundler? Babel transforms files; a bundler resolves and packages a module graph, though bundlers may invoke Babel.
  2. Does Babel type-check TS? No; it can strip TS syntax, but type checking is separate.
  3. Why preserve ESM? Downstream tools can analyze static imports for tree shaking and chunking.
  4. Does preset-env polyfill APIs automatically? Only with appropriate explicit polyfill configuration; syntax transforms alone don't provide APIs.
  5. What is a preset? A reusable collection of plugins and configuration.

References