🔧 Babel Config Generator

What Can the Babel Config Generator Do?

The Babel Config Generator is a free online tool that helps developers quickly generate Babel compiler configuration files through a visual interface. It supports presets, plugins, browserslist targets, and helpers. Output in babel.config.json, babel.config.js, or babel.config.mjs formats.

Core Features

• Preset Selection: One-click enable @babel/preset-env, react, typescript, flow with auto-configured compatibility options
• Plugin Management: Built-in common plugin library for class-properties, optional-chaining, decorators, and more
• Browserslist Configuration: Define target browser ranges with standard browserslist syntax
• Multi-Format Output: Supports JSON, CommonJS, and ESM config file formats
• Custom Extension: Manually add any Babel plugin with options
• One-Click Generation: Instant config with copy and download support

How to Use

1. Select output format (JSON/JS/ESM) and source type

2. Check presets (env, react, typescript, flow) and plugins you need

3. Configure browserslist target browser ranges

4. Adjust @babel/preset-env modules and useBuiltIns settings

5. Click "Generate Config" and copy or download to your project root

Use Cases

Case 1: New Project Setup

Quickly generate Babel configuration for new frontend projects, saving manual setup time.

Case 2: TypeScript + React

Configure Babel for TypeScript projects with React JSX transformation and polyfill injection.

Case 3: Library/Package Development

Generate ESM module output config for npm packages, preserving ES Module format while supporting older browsers.

Case 4: Migration from Babel 6/7

Regenerate configurations when upgrading from older Babel versions to use the latest recommended presets and plugins.

Technical Background

Babel is essential for modern JavaScript development, converting ES6+ code into backward-compatible JavaScript. Core concepts: presets are pre-configured plugin collections (preset-env automatically determines needed transforms based on target browsers); plugins implement individual transformations; browserslist shares target browser config across tools; useBuiltIns controls polyfill injection (usage for on-demand, entry for full). Babel 7.8+ supports TypeScript syntax parsing without ts-loader, and @babel/runtime prevents duplicate helper injection.