Babel config generator
Generate a babel.config.json or .babelrc with preset-env targets, TypeScript, React (automatic runtime), decorators and core-js polyfills — output as ready-to-use JSON.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Transpile options
These become presets / plugins arrays written the way Babel documents them.
Generated config
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/**"
]
}
What this tool does
- Shipping a library as both ESM and CJS: use preset-env with explicit targets so the output is downleveled exactly as far as needed.
- Nobody dares touch the existing Babel config? Click through the options here and compare with the generated JSON to see which fields actually take effect.
- Supporting older browsers: turn on useBuiltIns: usage with core-js so the APIs you use get polyfilled without manual imports.
- Adding TypeScript or decorator syntax: get the correct @babel/preset-typescript and decorator plugin shapes in one go.
Example
Input
Config file babel.config.json, targets defaults, TypeScript ticked, useBuiltIns usage, core-js 3.37
Output
{
"presets": [
[
"@babel/preset-env",
{
"targets": "defaults",
"useBuiltIns": "usage",
"corejs": "3.37"
}
],
[
"@babel/preset-typescript",
{
"onlyRemoveTypeImports": true
}
]
],
"ignore": [
"node_modules/**"
]
}Switch the config file to .babelrc and ignore disappears — ignore / only are root-only options and are ignored in file-level configs.
Frequently asked questions
What is the difference between babel.config.json and .babelrc?
babel.config.json is the project-level (root) config that applies to everything and may contain root-only options such as ignore, only and babelrcRoots. .babelrc is a file-relative config that only affects its own directory and below, and those root options are not allowed there — worth remembering in monorepos.
usage or entry for useBuiltIns?
usage lets Babel scan your code and inject only the core-js modules you actually use, which suits applications. entry requires importing "core-js/stable" yourself and injects everything the targets lack at once, which suits cases where you want predictable output size or are building a library. off injects nothing at all.
Do I still need the typescript package after ticking TypeScript?
Yes. @babel/preset-typescript only strips type syntax, it never type-checks, so typescript is still required and you should run tsc --noEmit separately in CI. That is exactly why compiling TS with Babel is so fast.
Why does the decorator plugin need version: "2023-11"?
There are several decorator proposals, and @babel/plugin-proposal-decorators requires an explicit version or it throws. 2023-11 is the current TC39 standard; the legacy form needs version: "legacy" together with classProperties, and the two cannot be mixed.
Does the generated config modify my project?
No. The JSON is assembled in the browser only — no requests, no disk writes. Copy it into your project root or the relevant subdirectory and you are done.
Keywords：babelbabel configbabel.config.jsonbabelrcpreset-envcore-jsbabel 配置装饰器polyfill前端工程化