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

資訊

此外掛程式包含在 @babel/preset-env 中，在 ES2022

具有靜態區塊的類別會轉換成靜態私有屬性，其初始化程式是包覆在 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

Shell

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"],
});

參考資料

• 建議：類別靜態區塊