What Is Babel? The JavaScript Compiler Explained

Babel is a JavaScript compiler that converts modern syntax and features into code that older browsers and environments can run.

Babel let developers write tomorrow's JavaScript today by transpiling new syntax down to versions that existing browsers understand. It is endlessly extensible through plugins and presets, and for years it was the default transform layer in nearly every front-end build.

What Babel is

Babel is a toolchain that compiles modern JavaScript (and JSX, TypeScript syntax) into backwards-compatible JavaScript. It parses source into an AST, applies transforms via plugins, and regenerates code. It can also inject polyfills for missing runtime features based on your target environments.

Presets and plugins

Individual transforms are plugins; presets are curated bundles of plugins. "@babel/preset-env" targets a configurable set of browsers and applies exactly the transforms needed, while "@babel/preset-react" and "@babel/preset-typescript" handle JSX and TypeScript syntax. This plugin model is why Babel can be adapted to almost any need.

A config example

A config lists the presets to apply.

A minimal Babel config

// babel.config.json
{
  "presets": [
    ["@babel/preset-env", { "targets": "> 0.5%, not dead" }],
    "@babel/preset-react"
  ]
}

Role in CI/CD

In CI, Babel runs as the transform step inside bundlers or test runners, producing compatible output and compiling test files. Because Babel is JavaScript and single-threaded, it can be a slow part of large builds; many teams now delegate transpilation to esbuild or SWC for speed while keeping Babel where its plugin ecosystem is needed.

Alternatives

SWC and esbuild perform similar transforms far faster, written in Rust and Go respectively. The TypeScript compiler can also down-level syntax. Babel remains valuable for its unmatched plugin ecosystem and fine-grained control over targets and polyfills.

Key takeaways

Babel compiles modern JavaScript into widely compatible code.
Presets bundle plugins; preset-env tailors transforms to target browsers.
It is slower than SWC/esbuild, so many pipelines use those for raw speed.