メインコンテンツへスキップ

プリセット

Babelプリセットは、共有可能なBabelプラグインと/または設定optionsとして機能します。

公式プリセット​

一般的な環境向けにいくつかのプリセットを用意しました。

その他の統合​

Babelを直接使用していない場合、使用しているフレームワークに独自の構成があり、それを利用したり拡張したりできる場合があります。その他多くのコミュニティが維持するプリセットがnpmで利用可能です！

Next.js | Nuxt.js | Parcel | Jest | Gatsby

プリセットの使用​

Babel設定内で、プリセットがnpmにある場合、プリセットの名前を渡すことができ、Babelはそれが既にnode_modulesにインストールされているかどうかを確認します。これはpresets設定オプションに追加されます。これは配列を受け取ります。

babel.config.json
{
  "presets": ["babel-preset-myPreset", "@babel/preset-env"]
}

それ以外の場合、プリセットへの相対パスまたは絶対パスを指定することもできます。

babel.config.json
{
  "presets": ["./myProject/myPreset"]
}

プラグインまたはプリセットのパス設定の詳細については、名前の正規化を参照してください。

Stage-X（実験的プリセット）​

非推奨

Babel 7以降、Stage-Xプリセットを非推奨とし、公開を停止することにしました。これらの提案は本質的に変更される可能性があるため、ユーザーに個々の提案をプラグインとして指定することを推奨します。詳細については、ブログをご覧ください。

stage-xプリセットの変換は、JavaScript（ES6/ES2015など）のリリースの一部として承認されていない言語の変更です。

TC39は、提案を以下の段階に分類しています。

  • Stage 0 - Strawman：単なるアイデア、Babelプラグインの可能性。
  • Stage 1 - Proposal：取り組む価値があります。
  • Stage 2 - Draft：初期仕様。
  • Stage 3 - Candidate：完全な仕様と初期のブラウザ実装。
  • Stage 4 - Finished：次の年間リリースに追加されます。

詳細については、最新のTC39提案とそのプロセスドキュメントを確認してください。

TC39の段階的プロセスは、Yehuda Katz (@wycatz)によるthefeedbackloop.xyzのいくつかの投稿で詳しく説明されています。Stage 0と1、Stage 2、Stage 3

プリセットの作成​

独自のプリセットを作成するには（ローカルでの使用またはnpmへの公開）、設定オブジェクトをエクスポートする必要があります。

プラグインの配列を返すだけです。

JavaScript
module.exports = function() {
  return {
    plugins: ["pluginA", "pluginB", "pluginC"],
  };
};

プリセットには、他のプリセットやオプション付きのプラグインを含めることができます。

JavaScript
module.exports = () => ({
  presets: [require("@babel/preset-env")],
  plugins: [
    [require("@babel/plugin-transform-class-properties"), { loose: true }],
    require("@babel/plugin-transform-object-rest-spread"),
  ],
});

詳細については、Babelハンドブックのプリセットに関するセクションをご覧ください。

プリセットの順序​

プリセットの順序は逆順（最後から先）です。

babel.config.json
{
  "presets": ["a", "b", "c"]
}

次の順序で実行されます：c、b、a。

これは主に、ほとんどのユーザーが「es2015」を「stage-0」の前にリストしていたため、後方互換性を確保するためです。

プリセットオプション​

プラグインとプリセットの両方で、設定内の名前とオプションオブジェクトを配列で囲むことでオプションを指定できます。

オプションを指定しない場合、これらはすべて同等です。

babel.config.json
{
  "presets": [
    "presetA", // bare string
    ["presetA"], // wrapped in array
    ["presetA", {}] // 2nd argument is an empty options object
  ]
}

オプションを指定するには、キーをオプション名として持つオブジェクトを渡します。

babel.config.json
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "loose": true,
        "modules": false
      }
    ]
  ]
}