Babel config generator — babel.config.json with env, React and TypeScript

How to use the Babel config generator

1. Keep @babel/preset-env ticked to turn modern JavaScript into code your targets understand.
2. Choose the Targets: From Browserslist, Current Node, or Custom query. For a custom query, type it in Custom targets query, for example > 0.5%, not dead.
3. Tick @babel/preset-react for JSX and choose the JSX runtime: Automatic or Classic.
4. Tick @babel/preset-typescript if you compile .ts and .tsx files with Babel.
5. Save the JSON as babel.config.json in the project root and run the install command shown below it.

What it does and when to use it

Babel rewrites source code into a form your runtime can execute: new syntax for older browsers, JSX into function calls, TypeScript into plain JavaScript. Which of those jobs it does is set by its presets. A config with the wrong preset order or a missing package gives confusing errors, so a generated starting point saves time.

The most common reason to add Babel today is testing: Jest uses Babel to read JSX and TypeScript unless you use ts-jest, so pair this file with the Jest config generator. The “From Browserslist” option reads the list the Browserslist config generator writes, and the tsconfig generator covers type checking, which Babel skips.

How it works

The output is one presets array. Babel runs presets from last to first, so the tool lists them as env, React, TypeScript; TypeScript is stripped first and env lowers the result last.

• preset-env appears as a plain name for Browserslist targets, with { "targets": { "node": "current" } } for Node, or with your query string for custom targets. An empty custom query falls back to Browserslist.
• preset-react always carries the runtime option you picked.
• preset-typescript is added without options.

The install command always includes @babel/core, plus one package per ticked preset. Options follow the preset-env documentation; the tool targets Babel 8.

Worked examples

Default: env from Browserslist plus React.

{
  "presets": [
    "@babel/preset-env",
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ]
  ]
}

Install: npm install --save-dev @babel/core @babel/preset-env @babel/preset-react.

A Node service in TypeScript, tested with Jest. React off, TypeScript on, targets Current Node. preset-env gets "node": "current" and @babel/preset-typescript follows it.

A custom browser query. Custom query > 0.5%, not dead with the classic runtime gives "targets": "> 0.5%, not dead" and "runtime": "classic".

Nothing ticked. The tool asks you to “Choose at least one preset.”

Limits and tips

• Plugins, polyfills (useBuiltIns, core-js) and per-environment overrides are not generated.
• If package.json has no Browserslist entry, preset-env falls back to its own defaults; check the result with npx browserslist.
• Babel and TypeScript versions move quickly. Check the install command against your other dependencies before upgrading a large project.