Babel 配置生成器
生成 babel.config.json 或 .babelrc：可选 preset-env 的 targets、TypeScript、React（automatic runtime）、装饰器与 core-js 按需 polyfill，输出为可直接使用的 JSON。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
转译选项
这些选项会按 Babel 官方推荐的写法拼成 presets / plugins 数组。
生成的配置
babel.config.json@babel/core, @babel/preset-env, @babel/preset-typescript, core-js{
"presets": [
[
"@babel/preset-env",
{
"targets": "defaults",
"useBuiltIns": "usage",
"corejs": "3.37"
}
],
[
"@babel/preset-typescript",
{
"onlyRemoveTypeImports": true
}
]
],
"ignore": [
"node_modules/**"
]
}
这个工具能做什么
- 库开发需要同时产出 ESM 与 CJS 时，用 preset-env 加 targets 控制降级程度，避免把语法降得过头。
- 老项目里已有 Babel 配置但没人敢动：把选项在这里点一遍，对照生成的 JSON 找出真正生效的字段。
- 需要兼容老浏览器时开启 useBuiltIns: usage + core-js，让用到的 API 自动补 polyfill，不用手工 import。
- 接入 TypeScript 或装饰器语法时，快速拿到 @babel/preset-typescript 与装饰器插件的正确写法。
示例
输入
配置文件 babel.config.json，targets defaults，勾选 TypeScript，useBuiltIns usage，core-js 3.37
输出
{
"presets": [
[
"@babel/preset-env",
{
"targets": "defaults",
"useBuiltIns": "usage",
"corejs": "3.37"
}
],
[
"@babel/preset-typescript",
{
"onlyRemoveTypeImports": true
}
]
],
"ignore": [
"node_modules/**"
]
}把配置文件切成 .babelrc，ignore 会消失——ignore / only 属于项目根配置专用选项，写在文件级配置里会被 Babel 忽略。
常见问题
babel.config.json 和 .babelrc 有什么区别？
babel.config.json 是项目级（root）配置，对整个项目生效，可以写 ignore、only、babelrcRoots 这类根配置专用选项；.babelrc 是文件级配置，只作用于所在目录及其子目录，不支持这些根选项，做 monorepo 分包时要注意这个差别。
useBuiltIns 的 usage 和 entry 怎么选？
usage 由 Babel 扫描代码，只注入真正用到的 core-js 模块，适合应用项目；entry 需要你在入口手动 import "core-js/stable"，一次性注入目标环境缺失的全部 polyfill，适合需要稳定产物体积或做库的场景。off 则完全不注入，polyfill 交给你自己处理。
勾了 TypeScript 之后还要装 typescript 吗？
要。@babel/preset-typescript 只负责去掉类型语法，不做类型检查，所以 typescript 本身仍需安装，并在 CI 里单独跑一次 tsc --noEmit 做类型校验——这正是 Babel 编译 TS 快的原因。
装饰器为什么要写 version: "2023-11"？
装饰器有多个提案版本，@babel/plugin-proposal-decorators 要求显式指定 version，否则会报错。2023-11 是当前 TC39 的标准版本，legacy 写法需要 version: "legacy" 并配合 classProperties，两者不能混用。
生成的配置会改我的项目文件吗？
不会。页面只在浏览器里拼 JSON，不发请求也不写磁盘；复制到项目根目录或对应子目录即可使用。
关键词：babelbabel configbabel.config.jsonbabelrcpreset-envcore-jsbabel 配置装饰器polyfill前端工程化