Pular para o conteúdo principal
iotools.cloudiotools.cloud

Gerador de Configuração Babel

Gere babel.config.json ou .babelrc a partir de campos de formulário: @babel/preset-env (targets, modules, useBuiltIns/corejs), preset-react (runtime, development), preset-typescript, preset-flow, plugins de sintaxe/transformação comuns, toggle decorators (legacy ou current proposal), e environment overrides para testes (Jest) e produção (remover console.*). Também mostra o comando npm install correspondente.

Entrada

Apenas altera o comentário do header — o corpo JSON é válido de qualquer maneira.

Presets

Browserslist query. Deixe em branco para usar seu próprio .browserslistrc / package.json browserslist field do projeto.

Defina como false quando um bundler (Webpack/Rollup/Vite) manipula os módulos ES, para que tree-shaking ainda funcione.

Injete polyfills core-js para os recursos que seus targets estão faltando.

React

TypeScript

Flow

Plugins

Opções de Saída

Saída

Configuração Gerada
Comando de instalação
Isso foi útil?

Mais formas de usar esta ferramenta

API REST

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"
  }'

Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.

Peça a um agente de IA

Use the IOTools `babel-config-generator` tool (Babel Config Generator) on this input:

YOUR_INPUT_HERE

Cole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.

Widget para incorporar

<iframe
  src="https://iotools.cloud/embed/babel-config-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Gerador de Configuração 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>

Coloque isso na sua própria página — grátis, sem chave, só um link de volta.

Custo por chamada de API/MCPA partir de 5 créditos
Precisa de mais créditos?Ver preços

Também disponível via

IntegraçõesExtensão de navegadorExtensão para VS Code

Guias

Crie babel.config.json ou .babelrc sem digitar manualmente nomes de presets, opções de plugin ou a forma exata que o Babel espera. Marque os presets e plugins que você precisa, defina suas opções, e copie uma configuração pronta para usar — mais o comando npm install correspondente.

O que abrange

  • @babel/preset-env — targets (browserslist query), modules (auto/false/commonjs), e useBuiltIns (false/usage/entry) com versão corejs.
  • @babel/preset-react — runtime (automático para React 17+, ou clássico) e flag development.
  • @babel/preset-typescript — com isTSX/allExtensions quando você precisa de sintaxe TSX dentro de arquivos .ts.
  • @babel/preset-flow.
  • Plugins de sintaxe/transformação comuns: 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, versão de proposta TC39 atual ou decorators legacy-style (código Angular/MobX/TypeORM mais antigo).
  • Substituições de ambiente — substituição test direcionada à versão Node atual (setup Jest padrão) e substituição production que remove chamadas console.*.

Como usar

  1. Escolha quais presets você precisa e defina suas opções inline (targets, modules, useBuiltIns, runtime, …).
  2. Selecione plugins extras da lista de multi-select e ative decorators se seu código os usa.
  3. Alterne as substituições de ambiente test/production se forem aplicáveis ao seu projeto.
  4. Copie o arquivo gerado para a raiz do seu projeto como babel.config.json (ou .babelrc), e execute o comando de instalação mostrado abaixo.

Babel analisa seus próprios arquivos de configuração com leniência — os comentários // na saída são seguros para manter, ou remover para um arquivo JSON mais rigoroso.

FAQ

Devo usar babel.config.json ou .babelrc?

babel.config.json é a opção moderna em toda o projeto — aplica-se aos pacotes de um monorepo e aos arquivos node_modules que você compila explicitamente. .babelrc é limitado ao único pacote em que reside. A menos que tenha um motivo para manter a configuração local em um pacote, prefira babel.config.json.

Preciso do @babel/plugin-transform-runtime?

Somente se você quiser que as funções helper do Babel (e built-ins polyfilled com opção corejs) sejam compartilhadas via @babel/runtime em vez de duplicadas em todos os arquivos compilados — reduz o tamanho do bundle ao custo de uma dependência de runtime extra. Pule para um aplicativo simples; é mais útil para bibliotecas.

Precisa verificar a configuração após editá-la? Cole no JSON Formatter para validar a sintaxe. Para a configuração do compilador do lado TypeScript em vez de Babel, veja tsconfig.json Generator.

Roda totalmente em seu navegador — nada é enviado.

babelbabelrcbabel.config.jsonpreset-envpreset-reactjsxtranspilerbrowserslistpolyfilldeveloper tools

Ama as ferramentas? Livre-se dos anúncios.

Um único pagamento remove todos os anúncios da sua conta, para sempre. Sem assinatura, sem rastreamento.

Remover anúncios