Why does preset-env need browserslist targets?

@babel/preset-env uses the targets you give it to decide exactly which syntax transforms and polyfills are necessary, transforming only what those environments don't support natively. Omitting targets makes it transform everything down to a very old baseline, producing larger, slower output than most projects need.

What does { runtime: "automatic" } do in preset-react?

It enables the modern JSX transform, which lets you write JSX without importing React in every file, since the compiler automatically imports the jsx/jsxs runtime functions it needs. This matches how React 17+ and most current tooling (Next.js, Vite) already handle JSX by default.

Do I still need Babel if I'm using TypeScript's own compiler?

Not necessarily, tsc alone can compile TypeScript to JavaScript. Babel with @babel/preset-typescript is typically used instead when a build pipeline (like a bundler's Babel-based loader) needs a single fast transpile step and type-checking is run as a separate step (via tsc --noEmit) rather than blocking the build.

In what order should presets be listed?

Babel applies presets in reverse array order (last to first), so this tool lists preset-env first, then preset-react, then preset-typescript, matching Babel's own documented convention for combining these three.

Babel Config Generator - babel.config.js Presets & Plugins

Overview

Introduction

Babel's own documentation covers preset-env, preset-react, and preset-typescript individually, but combining all three correctly, with the right array order and a real browserslist targets object, means cross-referencing several pages.

This tool generates a working babel.config.js from simple toggles: which presets to include, a comma-separated browserslist targets list for preset-env, and a free-form plugin list.

What Is Babel Config Generator?

A babel.config.js generator supporting @babel/preset-env (with configurable browserslist targets), @babel/preset-react (using the modern automatic JSX runtime), and @babel/preset-typescript, plus an arbitrary plugins list.

The output is real CommonJS (`module.exports = { ... }`), matching what Babel actually loads from a babel.config.js at the project root.

How Babel Config Generator Works

Each enabled preset is added to the presets array in Babel's documented order for combining these three (env, then react, then typescript), with preset-env given a `targets` option only when you've entered at least one browserslist query.

Plugin names you list are added verbatim as strings to a `plugins` array, which is omitted entirely from the output when empty rather than emitted as an empty array.

When To Use Babel Config Generator

Use it when setting up Babel for a project that needs JSX and/or TypeScript transpilation through a Babel-based pipeline (a bundler's Babel loader, Jest's Babel transform, or a standalone Babel CLI build).

It's also useful for quickly producing browser-target-aware preset-env configuration without writing the browserslist targets object by hand.

Often used alongside Webpack Config Generator, package.json Generator and ESLint Flat Config Generator.

Features

Advantages

Produces presets in Babel's documented, correct combining order rather than an arbitrary order that could cause a transform to run before its dependency.
Browserslist targets are entered as a plain comma-separated list and converted into the array-of-strings shape preset-env expects.
Omits empty presets/plugins arrays entirely rather than emitting `plugins: []`, keeping the generated file clean.

Limitations

Requires at least one preset enabled; a config with zero presets and only plugins is valid Babel but unusual, so the tool asks you to pick a preset first.
Doesn't install the corresponding npm packages; each enabled preset/plugin still needs to be installed for Babel to actually resolve it.

Examples

React + TypeScript with modern browser targets

Input

presetEnv: true, targets: "defaults", presetReact: true, presetTypescript: true

Output

module.exports = {
  presets: [
    ["@babel/preset-env", { targets: ["defaults"] }],
    ["@babel/preset-react", { runtime: "automatic" }],
    "@babel/preset-typescript",
  ],
};

Best Practices & Notes

Best Practices

Set browserslist targets to match your actual supported browser matrix (or reuse the project's existing `browserslist` field in package.json) instead of leaving preset-env untargeted.
Prefer the automatic JSX runtime (as this generator does by default) over the classic runtime, so files no longer need an explicit `import React from "react"` just to use JSX.
Keep the plugins list minimal; most functionality needed in a modern codebase is already covered by the three presets, and extra plugins can slow down builds or conflict with preset behavior.

Developer Notes

Babel presets run in reverse array order and plugins run before presets, so the fixed array order this generator produces (env, react, typescript) matches Babel's own recommended ordering when stacking these together, ensuring TypeScript syntax is stripped before JSX and syntax-lowering transforms need to see plain JS/JSX. `targets` is only attached to preset-env as an object form (`["@babel/preset-env", { targets }]`) when at least one browserslist query is present, otherwise preset-env is emitted as a bare string entry so Babel falls back to reading `browserslist` config from package.json or a .browserslistrc file.

Babel Config Generator Use Cases

Setting up Babel for a project using Jest's Babel-based transform for JSX/TypeScript test files
Configuring a Babel-loader-based webpack build for a React + TypeScript codebase
Producing a portable babel.config.js to share across multiple packages in a monorepo

Common Mistakes

Leaving preset-env untargeted, causing it to transform down to a very old JavaScript baseline and ship unnecessary polyfills/transforms for browsers nobody supports.
Listing presets in the wrong order (e.g. typescript before react), which can cause syntax that a later preset expects to already be stripped to still be present when that preset runs.

Tips

Use the Webpack Config Generator next to wire this babel.config.js into a babel-loader rule for .js/.jsx/.ts/.tsx files.

Babel Config Generator