プラグイン

Babelのコード変換は、プラグイン（またはプリセット）を設定ファイルに適用することで有効になります。

プラグインの使用

プラグインがnpmにある場合、プラグインの名前を渡すと、Babelはそれがnode_modulesにインストールされていることを確認します。これは、配列を受け取るplugins設定オプションに追加されます。

babel.config.json

{
  "plugins": ["babel-plugin-myPlugin", "@babel/plugin-transform-runtime"]
}

プラグインへの相対パス/絶対パスを指定することもできます。

babel.config.json

{
  "plugins": ["./node_modules/asdf/plugin"]
}

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

変換プラグイン

これらのプラグインは、コードに変換を適用します。

情報

変換プラグインは対応する構文プラグインを有効にするため、両方を指定する必要はありません。

構文プラグイン

ほとんどの構文はBabelによって変換可能です。まれなケース（変換がまだ実装されていない場合、またはデフォルトの方法がない場合）では、@babel/plugin-syntax-bigintなどのプラグインを使用して、Babelが特定の種類の構文を**解析**できるようにするだけにすることができます。または、Babelにコード解析またはコードモッドのみを実行させたい場合は、ソースコードを保持したい場合があります。

ヒント

対応する変換プラグインが既に使用されている場合は、構文プラグインを指定する必要はありません。変換プラグインが自動的に有効にするためです。

あるいは、Babelパーサーのpluginsオプションを指定することもできます。

あなたの.babelrc

JSON

{
  "parserOpts": {
    "plugins": ["jsx", "flow"]
  }
}

プラグインの順序

プラグインの各ビジターにとって、順序は重要です。

これは、2つの変換が両方とも「Program」ノードにアクセスする場合、変換はプラグインまたはプリセットの順序で実行されることを意味します。

• プラグインはプリセットの前に実行されます。
• プラグインの順序は最初からです。
• プリセットの順序は逆です（最後から最初）。

例えば

babel.config.json

{
  "plugins": ["transform-decorators-legacy", "transform-class-properties"]
}

は、transform-decorators-legacyを実行してからtransform-class-propertiesを実行します。

プリセットでは、順序が*逆*であることを覚えておくことが重要です。以下

babel.config.json

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

は、次の順序で実行されます：@babel/preset-react、次に@babel/preset-env。

プラグインオプション

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

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

babel.config.json

{
  "plugins": ["pluginA", ["pluginA"], ["pluginA", {}]]
}

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

babel.config.json

{
  "plugins": [
    [
      "transform-async-to-module-method",
      {
        "module": "bluebird",
        "method": "coroutine"
      }
    ]
  ]
}

プリセットのオプションの設定はまったく同じです

babel.config.json

{
  "presets": [
    [
      "env",
      {
        "loose": true,
        "modules": false
      }
    ]
  ]
}

プラグイン開発

独自のプラグインを作成する方法については、優れたbabel-handbookを参照してください。

名前を逆にするシンプルなプラグイン（ホームページから）

JavaScript

export default function() {
  return {
    visitor: {
      Identifier(path) {
        const name = path.node.name;
        // reverse the name: JavaScript -> tpircSavaJ
        path.node.name = name
          .split("")
          .reverse()
          .join("");
      },
    },
  };
}