Lewati ke konten utama
iotools.cloudiotools.cloud

Generator Konfigurasi Babel

Buat babel.config.json atau .babelrc dari field formulir: @babel/preset-env (targets, modules, useBuiltIns/corejs), preset-react (runtime, development), preset-typescript, preset-flow, plugin syntax/transform umum, toggle decorators (legacy atau current proposal), dan environment overrides untuk tests (Jest) dan production (strip console.*). Juga menampilkan perintah npm install yang sesuai.

Input

Hanya mengubah komentar header — body JSON valid di kedua cara.

Presets

Browserslist query. Kosongkan untuk menggunakan .browserslistrc atau package.json browserslist field proyek Anda sendiri.

Set ke false ketika bundler (Webpack/Rollup/Vite) menangani ES modules sendiri, sehingga tree-shaking tetap bekerja.

Inject core-js polyfills untuk fitur yang dibutuhkan targets Anda.

React

TypeScript

Flow

Plugins

Output Options

Output

Generated Config
Install command
Apakah ini membantu?

Cara lain menggunakan alat ini

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

Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.

Tanyakan ke agen AI

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

YOUR_INPUT_HERE

Tempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.

Widget sematan

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

Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.

Biaya per panggilan API/MCPMulai dari 5 kredit
Butuh kredit lebih?Lihat harga

Juga tersedia melalui

IntegrasiEkstensi browserEkstensi VS Code

Panduan

Buat babel.config.json atau .babelrc tanpa mengetik nama preset, opsi plugin, atau bentuk yang diharapkan Babel. Centang preset dan plugin yang Anda butuhkan, atur opsinya, dan copy out konfigurasi yang siap digunakan — plus perintah npm install yang sesuai.

Apa yang dicakup

  • @babel/preset-env — targets (browserslist query), modules (auto/false/commonjs), dan useBuiltIns (false/usage/entry) dengan versi corejs.
  • @babel/preset-react — runtime (automatic untuk React 17+, atau classic) dan flag development.
  • @babel/preset-typescript — dengan isTSX/allExtensions ketika Anda memerlukan sintaks TSX dalam file .ts.
  • @babel/preset-flow.
  • Plugin syntax/transform umum: 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, baik versi proposal TC39 saat ini atau decorators legacy-style (kode Angular/MobX/TypeORM lebih lama).
  • Environment overrides — override test menargetkan Node version saat ini (setup Jest standar) dan override production yang menghapus panggilan console.*.

Cara menggunakannya

  1. Pilih preset yang Anda butuhkan dan atur opsi inline-nya (targets, modules, useBuiltIns, runtime, …).
  2. Pilih plugin tambahan dari daftar multi-select, dan aktifkan decorators jika kode Anda menggunakannya.
  3. Toggle environment overrides test/production jika berlaku untuk proyek Anda.
  4. Copy file yang dihasilkan ke root proyek Anda sebagai babel.config.json (atau .babelrc), dan jalankan perintah install yang ditampilkan di bawahnya.

Babel menjalankan parsing file konfigurasinya sendiri dengan leniently — komentar // dalam output aman untuk disimpan, atau strip untuk file JSON yang lebih ketat.

FAQ

Haruskah saya menggunakan babel.config.json atau .babelrc?

babel.config.json adalah opsi project-wide modern — berlaku di seluruh paket monorepo dan file node_modules yang Anda compile secara eksplisit. .babelrc adalah scoped ke single package di mana ia berada. Kecuali Anda memiliki alasan untuk menjaga konfigurasi lokal ke satu paket, lebih suka babel.config.json.

Apakah saya memerlukan @babel/plugin-transform-runtime?

Hanya jika Anda ingin fungsi helper Babel (dan built-ins polyfilled dengan opsi corejs) dibagikan melalui @babel/runtime daripada diduplikasi di setiap file yang dikompilasi — ini mengecilkan ukuran bundle dengan biaya satu dependensi runtime tambahan. Lewati untuk aplikasi sederhana; paling berguna untuk libraries.

Perlu memeriksa konfigurasi setelah mengeditnya lebih lanjut? Paste ke dalam JSON Formatter untuk memvalidasi sintaksnya. Untuk konfigurasi compiler sisi TypeScript bukan Babel, lihat tsconfig.json Generator.

Berjalan sepenuhnya di browser Anda — tidak ada yang di-upload.

babelbabelrcbabel.config.jsonpreset-envpreset-reactjsxtranspilerbrowserslistpolyfilldeveloper tools

Suka alat-alatnya? Hilangkan iklannya.

Satu kali pembayaran menghapus semua iklan dari akun Anda, selamanya. Tanpa langganan, tanpa pelacakan.

Hapus iklan