π§ Babel Config Generator
βοΈ Basic Settings
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.
β What can the Babel Config Generator do?
Generates Babel compiler configuration files through a visual interface. Supports presets, plugins, browserslist targets, and helpers.
β What output formats are supported?
Supports babel.config.json (JSON), babel.config.js (CommonJS), and babel.config.mjs (ESM).
β What presets are supported?
Supports @babel/preset-env, @babel/preset-react, @babel/preset-typescript, and @babel/preset-flow.
β Does this tool upload my configuration data?
No. All configuration generation is done locally in your browser. No data is sent to any server.
β Can I customize browserslist targets?
Yes. Use browserslist syntax to define target browsers, e.g., '> 1%, last 2 versions, not dead'.
β Can I add custom plugins?
Yes. Select from the common plugins list or manually add any Babel plugin name in the custom section.