🔧 Babel配置生成器

Babel配置生成器能做什么？

Babel配置生成器是一款免费的在线工具，通过可视化界面帮助开发者快速生成Babel编译器的配置文件。支持预设(presets)、插件(plugins)、目标浏览器(browserslist)、辅助函数(helpers)等常用配置项的图形化选择，生成babel.config.json/js/mjs三种格式。

核心功能

• 预设选择：一键启用@babel/preset-env、react、typescript、flow等主流预设，自动配置兼容选项
• 插件管理：内置常用插件库，勾选即可添加class-properties、optional-chaining、decorators等
• 目标浏览器配置：通过browserslist语法配置兼容范围，自动生成env.presets的targets
• 多格式输出：支持JSON、CommonJS、ESM三种配置文件格式
• 自定义扩展：支持手动添加任意Babel插件和选项
• 一键生成：配置即生成，支持复制和下载

使用教程

1. 选择输出格式（JSON/JS/ESM）和源代码类型

2. 勾选需要的预设（env、react、typescript、flow）和插件

3. 配置browserslist目标浏览器范围

4. 调整@babel/preset-env的modules和useBuiltIns设置

5. 点击"生成配置"，复制或下载配置文件到项目根目录

应用场景

场景1：新项目初始化

搭建新前端项目时，快速生成Babel配置文件，减少手动配置流程。

场景2：TypeScript项目配置

为TypeScript项目配置Babel编译，同时支持React JSX转换和polyfill注入。

场景3：库/工具开发

开发NPM包时生成ESM模块输出配置，保留ES Module格式的同时兼容旧浏览器。

场景4：项目升级迁移

从Babel 6/7升级时重新生成配置，确保使用最新推荐的预设和插件设置。

扩展知识

Babel是现代JavaScript开发的必需品，将ES6+代码转换为向后兼容的JavaScript版本。核心概念：presets是一组预配置的插件集合（如preset-env根据目标浏览器自动确定需要转换的语法）；plugins是单个转换功能的实现；browserslist在多个工具间共享目标浏览器配置；useBuiltIns控制polyfill的注入方式（usage按需/entry全量）。Babel 7.8+支持TypeScript语法解析而无需ts-loader，@babel/runtime可避免辅助函数重复注入。