@babel/plugin-transform-class-static-block

情報

このプラグインは、ES2022で導入された機能に対応しており、@babel/preset-env に含まれています。

静的ブロックを持つクラスは、静的プライベートプロパティに変換されます。その初期化子は、IIAFE（即時実行アロー関数式）でラップされた静的ブロックです。

例

JavaScript

class C {
  static #x = 42;
  static y;
  static {
    try {
      this.y = doSomethingWith(this.#x);
    } catch {
      this.y = "unknown";
    }
  }
}

は以下のように変換されます

JavaScript

class C {
  static #x = 42;
  static y;
  static #_ = (() => {
    try {
      this.y = doSomethingWith(this.#x);
    } catch {
      this.y = "unknown";
    }
  })();
}

出力コードにはプライベートクラスプロパティが含まれているため、他のクラス機能プラグイン（例：@babel/plugin-transform-class-properties）を既に使用している場合は、必ず他のプラグインの*前*に配置してください。

babel.config.json

{
  "plugins": [
    "@babel/plugin-transform-class-static-block",
    "@babel/plugin-transform-class-properties"
  ]
}

インストール

npm

npm install --save-dev @babel/plugin-transform-class-static-block

Yarn

yarn add --dev @babel/plugin-transform-class-static-block

pnpm

pnpm add --save-dev @babel/plugin-transform-class-static-block

使用方法

設定ファイルを使用する場合（推奨）

babel.config.json

{
  "plugins": ["@babel/plugin-transform-class-static-block"]
}

CLI経由

シェル

babel --plugins @babel/plugin-transform-class-static-block script.js

Node API経由

JavaScript

require("@babel/core").transformSync("code", {
  plugins: ["@babel/plugin-transform-class-static-block"],
});

参考資料

• 提案：クラス静的ブロック