Babel 配置生成器
从表单字段生成 babel.config.json 或 .babelrc：@babel/preset-env（targets、modules、useBuiltIns/corejs）、preset-react（runtime、development）、preset-typescript、preset-flow、常见的语法/转换插件、decorators 切换（legacy 或 current proposal）以及测试 (Jest) 和生产环境（删除 console.*）的环境覆盖。还显示匹配的 npm install 命令。
输入
仅更改标题注释 — JSON 正文无论哪种方式都是有效的。
Presets
Browserslist 查询。留空以使用您项目自己的 .browserslistrc / package.json browserslist 字段。
当打包器 (Webpack/Rollup/Vite) 自行处理 ES 模块时设置为 false，这样 tree-shaking 仍然有效。
为您的目标缺少的功能注入 core-js polyfills。
React
TypeScript
Flow
Plugins
输出选项
输出
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/babel-config-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"outputFormat": "babel.config.json",
"presetEnv": "true",
"envTargets": "> 0.25%, not dead",
"envModules": "auto",
"envUseBuiltIns": "usage",
"envCorejs": "3.38",
"presetReact": "true",
"reactRuntime": "automatic",
"reactDevelopment": "",
"presetTypescript": "true",
"tsAllExtensions": "",
"presetFlow": "",
"plugins": "[\"@babel/plugin-transform-runtime\",\"@babel/plugi…",
"pluginDecorators": "true",
"decoratorsLegacy": "",
"envTestNodeCurrent": "true",
"envProdRemoveConsole": "true",
"includeComments": "true",
"includeHeader": "true"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `babel-config-generator` tool (Babel Config Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/babel-config-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Babel 配置生成器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
无需手动输入预设名称、插件选项或 Babel 期望的确切形式即可创建 babel.config.json 或 .babelrc。检查您需要的预设和插件，设置它们的选项，并复制出可以立即使用的配置 — 加上匹配的 npm install 命令。
涵盖的内容
- @babel/preset-env —
targets（browserslist 查询）、modules（auto/false/commonjs）和useBuiltIns（false/usage/entry）及corejs版本。 - @babel/preset-react —
runtime（React 17+ 为自动，或 classic）和development标志。 - @babel/preset-typescript — 当您需要在
.ts文件中使用 TSX 语法时使用isTSX/allExtensions。 - @babel/preset-flow。
- 常见的语法/转换插件：
plugin-transform-runtime、plugin-transform-class-properties、plugin-transform-private-methods、plugin-transform-private-property-in-object、plugin-syntax-dynamic-import、plugin-proposal-export-default-from。 - Decorators —
@babel/plugin-proposal-decorators，要么是当前的 TC39 提案版本，要么是 legacy 风格的装饰器（较早的 Angular/MobX/TypeORM 代码）。 - 环境覆盖 — 面向当前 Node 版本的
test覆盖（标准 Jest 设置）和删除console.*调用的production覆盖。
如何使用
- 选择您需要的预设并设置其内联选项（targets、modules、useBuiltIns、runtime、…）。
- 从多选列表中选择任何额外的插件，如果您的代码使用装饰器则打开它们。
- 如果适用于您的项目，切换测试/生产环境覆盖。
- 将生成的文件复制到项目根目录作为
babel.config.json（或.babelrc），并运行下面显示的安装命令。
Babel 宽松地解析自己的配置文件 — 输出中的 // 注释可以安全地保留，或为更严格的 JSON 文件删除。
常见问题
我应该使用 babel.config.json 还是 .babelrc？
babel.config.json 是现代的项目范围选项 — 它适用于整个 monorepo 的包和您明确编译的 node_modules 文件。.babelrc 作用域限于它所在的单个包。除非您有理由将配置保持在一个包本地，否则优先使用 babel.config.json。
我需要 @babel/plugin-transform-runtime 吗？
只有当您想通过 @babel/runtime 共享 Babel 的辅助函数（以及带有 corejs 选项的 polyfilled built-ins）而不是在每个编译的文件中复制时 — 它以额外运行时依赖的代价缩小了 bundle 大小。对于简单的应用程序跳过它；它对库最有用。
需要在进一步编辑后检查配置？将其粘贴到 JSON Formatter 来验证语法。对于 TypeScript 端的编译器配置而不是 Babel，请参阅 tsconfig.json Generator。
完全在您的浏览器中运行 — 不上传任何内容。