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

@babel/preset-env — compile modern JS down to your targets

targets

Browserslistクエリ。空白にしてプロジェクト独自の.browserslistrcまたはpackage.json browserslistフィールドを使用します。

modules

バンドラー (Webpack/Rollup/Vite) がESモジュール自体を処理する場合はfalseに設定してツリーシェイキングが機能し続けます。

useBuiltIns

ターゲットが欠けている機能のcore-jsポリフィルを注入します。

React

@babel/preset-react — compile JSX

TypeScript

@babel/preset-typescript — strip TS types

Flow

@babel/preset-flow — strip Flow types

Plugins

シンタックス/トランスフォームプラグイン

@babel/plugin-proposal-decorators

出力オプション

セクションコメントを含める

説明的なヘッダーコメントを含める

出力

生成された設定

インストールコマンド

役に立ちましたか？

このツールを使う他の方法

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 1回あたりの費用	5クレジットから
クレジットが足りませんか?	料金を見る

次の方法でも利用可能

統合ブラウザ拡張機能 VS Code拡張機能

ガイド

プリセット名、プラグインオプション、またはBabelが期待する正確な形式を手動で入力することなくbabel.config.jsonまたは.babelrcを作成します。必要なプリセットとプラグインをチェックして、オプションを設定し、すぐに使える設定をコピーしてください — さらに一致するnpm installコマンドも表示します。

カバーされる内容

@babel/preset-env — targets (browserslist query)、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提案バージョンまたはレガシースタイルのデコレーター (古いAngular/MobX/TypeORMコード)。
環境オーバーライド — 現在のNodeバージョン (標準Jest設定) をターゲットするtestオーバーライドとconsole.*呼び出しを削除するproductionオーバーライド。

使い方

必要なプリセットを選択してインラインオプション (targets、modules、useBuiltIns、runtime、…) を設定します。
マルチセレクトリストから追加プラグインを選択し、コードが使用する場合はデコレーターをオンにします。
プロジェクトに当てはまる場合は、test/production環境オーバーライドを切り替えます。
生成されたファイルをプロジェクトルートにbabel.config.json (または.babelrc) としてコピーし、以下に表示されるインストールコマンドを実行します。

Babelは独自の設定ファイルを甘く解析します — 出力の//コメントは保持しても安全、またはより厳密なJSONファイルの場合は削除できます。

FAQ

babel.config.jsonと.babelrcのどちらを使うべきですか?

babel.config.jsonは最新のプロジェクト全体のオプションです — モノレポのパッケージと明示的にコンパイルするnode_modulesファイルに適用されます。.babelrcはそれが存在する単一パッケージに限定されます。設定をパッケージ1つに保持する理由がない限り、babel.config.jsonを優先します。

@babel/plugin-transform-runtimeが必要ですか?

Babelヘルパー関数 (とcorejsオプション付きのポリフィルされたbuilt-ins) を各コンパイル済みファイルで複製する代わりに@babel/runtime経由で共有する場合のみです — 追加のランタイム依存関係のコストでバンドルサイズを縮小します。シンプルなアプリの場合はスキップします。ライブラリに最も有用です。

編集後に設定を確認する必要がありますか? JSON Formatterに貼り付けて構文を検証します。Babelの代わりにTypeScript側のコンパイラ設定については、tsconfig.json Generatorを参照してください。

ブラウザで完全に実行されます — 何もアップロードされません。

babelbabelrcbabel.config.jsonpreset-envpreset-reactjsxtranspilerbrowserslistpolyfilldeveloper tools

ツールが気に入りましたか？広告をなくしましょう。

1回のお支払いでアカウントから広告が完全になくなります。サブスクリプションも追跡もありません。

広告を削除