babeljs.io No paid content found Multilingual

What is Babel?

Babel is a JavaScript compiler that translates modern JavaScript code into versions that older browsers and runtimes can execute. It is best known for transforming syntax introduced in recent ECMAScript editions—such as arrow functions, classes, and optional chaining—into equivalent code that works in environments lacking native support.

Beyond syntax, Babel often pairs with plugins and presets to handle experimental proposals, JSX for React, and TypeScript-style annotations. It can also polyfill missing built-in features when configured with the appropriate tools. This makes it useful for library authors who want broad compatibility, teams maintaining applications that must support older browsers, and developers adopting new language features before they are universally available.

The trade-offs are configuration complexity and build-time overhead. A default setup may require choosing presets, managing plugin order, and deciding on polyfill strategy. Because Babel focuses on transformation rather than bundling, it is typically used alongside a bundler or task runner. The official project site, Babel, documents setup options and the plugin ecosystem.

How do I install and set up Babel?

Babel is a JavaScript compiler that transforms modern JavaScript into code compatible with older environments, so you can use new syntax and features without breaking support for older browsers or runtimes.

Installation

The typical setup is local to each project. With npm, the common pattern is to install Babel's core package as a development dependency, along with a preset that defines which transformations to apply. The most widely used preset targets the current generation of JavaScript. Package managers such as npm, Yarn and pnpm all work; choose whichever your project already uses.

Configuration

After installing, you add a configuration file at the project root. This file tells Babel which presets or plugins to use. A minimal configuration references just the preset. You can also configure Babel through a key in your package manager's manifest file if you prefer fewer files.

Running Babel

You can invoke Babel directly from the command line to compile a file or a directory, or wire it into a build tool. Many projects use a bundler such as webpack or Rollup, loading Babel through a loader or plugin. Others run Babel as a standalone step before or alongside other tooling.

Practical notes

• Keep Babel configured per project rather than globally, so versions stay consistent.
• Start with a preset, then add individual plugins only when you need a specific transform.
• Check the official documentation at Babel for current package names and configuration syntax, since these evolve between major versions.

The trade-off is straightforward: extra build configuration and compile time in exchange for broader compatibility and access to newer language features.

What are Babel presets and plugins used for?

Babel is a JavaScript compiler that transforms modern JavaScript into versions that older browsers or environments can run. It achieves this through two kinds of configuration units: plugins and presets.

Plugins handle individual transformations. Each plugin typically targets one syntax feature or behavior — for example, converting arrow functions, optional chaining, or JSX syntax. Because they are granular, plugins let you enable only the transformations your project actually needs.

Presets are curated collections of plugins bundled together. Instead of listing dozens of plugins manually, you apply a preset that groups them for a common goal. Common examples include:

• @babel/preset-env — adapts output to your target browsers or runtimes automatically.
• @babel/preset-react — adds the transforms needed for React JSX.
• @babel/preset-typescript — strips TypeScript type syntax.

The practical difference is scope and control. Plugins offer fine-grained tuning and are suited to projects that need specific, minimal transformations. Presets offer convenience and are typically used as a sensible baseline, with plugins added on top for extra needs.

Most projects use both: a preset for broad compatibility plus a few plugins for features the preset does not cover. Order matters, since Babel applies plugins and presets in sequence, and presets run in reverse order. This layered approach keeps configuration manageable while still allowing precise control when required.

How does Babel compile modern JavaScript for older browsers?

Babel is a JavaScript compiler that translates modern syntax into code older browsers can run. It parses source into an abstract syntax tree, applies transformation plugins, then generates output.

Core workflow

• Parsing: Source becomes an AST using Babel's parser.
• Transforming: Plugins rewrite nodes—for example, converting arrow functions to regular functions or let/const to var.
• Generating: The modified AST is printed back as JavaScript, optionally with source maps.

Presets and targets

Presets group plugins. @babel/preset-env lets you specify target browsers; Babel then includes only the transformations those targets need. A browserslist configuration or a targets option typically drives this, so a project supporting only modern browsers compiles less.

What it does not handle

Babel transforms syntax, not missing built-in APIs. Features like Promise or Array.prototype.includes may need polyfills, often via core-js paired with a usage-based preset.

Trade-offs

• More targets mean larger, more heavily rewritten output.
• Source maps help debugging compiled code.
• Build times rise with the number of plugins.

It suits projects that must support older browsers without rewriting source. For deeper configuration, see Babel.

Can Babel convert JSX and TypeScript code?

Yes. Babel handles both JSX and TypeScript syntax through dedicated presets rather than a single built-in mode.

JSX
Use @babel/preset-react to transform JSX into plain JavaScript function calls. This is common in React projects and works with either the classic runtime or the newer automatic runtime.

TypeScript
Use @babel/preset-typescript to strip type annotations and other TypeScript-only syntax. It removes types but does not type-check them, so you typically run tsc separately for type errors.

H3: Key trade-offs

Babel is well suited to projects that already use its plugin ecosystem, need custom syntax transforms, or want a shared build pipeline across frameworks. For straightforward TypeScript-only projects, the TypeScript compiler alone may be simpler, since it both compiles and checks types. Many teams combine both tools: Babel for fast transpilation and tsc for validation.

See Babel for preset configuration details.

How do I configure Babel for my project?

Configuring Babel usually starts with installing the core packages and then adding a configuration file at the project root. A common minimal setup uses @babel/core and @babel/cli for command-line builds, plus preset packages such as @babel/preset-env for modern JavaScript syntax and @babel/preset-react for JSX if you use React.

The main configuration file is typically babel.config.json, which applies to the whole project. For a library or monorepo, this root-level file is often preferred because it can be shared across packages. A .babelrc.json file may be used for package-specific settings, though it is more limited in scope.

Typical steps

1. Install Babel and the presets you need.
2. Create babel.config.json and add a presets array.
3. Run Babel through the CLI, a bundler plugin, or a test runner.
4. Add plugins for features not covered by presets, such as class properties or runtime helpers.

Choosing presets and plugins

@babel/preset-env targets the browsers or Node versions you specify, so it transforms only what is necessary. Plugins handle individual syntax proposals or transforms. Order matters: plugins run before presets, and plugin order is generally first-to-last.

For framework-specific setups, Babel is often configured through the framework's own tooling rather than manually. The official documentation at Babel explains presets, plugins, and configuration file resolution in detail.