跳至主要內容

@babel/plugin-proposal-decorators

範例​

簡單的類別裝飾器​

JavaScript
@annotation
class MyClass {}

function annotation(target) {
  target.annotated = true;
}

類別裝飾器​

JavaScript
@isTestable(true)
class MyClass {}

function isTestable(value) {
  return function decorator(target) {
    target.isTestable = value;
  };
}

類別方法裝飾器​

JavaScript
class C {
  message = "hello!";

  @bound
  m() {
    console.log(this.message);
  }
}

function bound(value, { name, addInitializer }) {
  addInitializer(function () {
    this[name] = this[name].bind(this);
  });
}

安裝​

npm install --save-dev @babel/plugin-proposal-decorators

用法​

babel.config.json
{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "version": "2023-11" }]
  ]
}

透過 Node API​

JavaScript
require("@babel/core").transformSync("code", {
  plugins: [
    ["@babel/plugin-proposal-decorators", { version: "2023-11" }],
  ]
});

選項​

歷史
版本變更
v7.24.0新增對 version: "2023-11" 的支援
v7.22.0新增對 version: "2023-05" 的支援
v7.21.0新增對 version: "2023-01" 的支援
v7.19.0新增對 version: "2022-03" 的支援
v7.17.0新增 version 選項，支援 "2021-12"、"2018-09" 和 "legacy"

version​

"2023-11"、"2023-05"、"2023-01"、"2022-03"、"2021-12"、"2018-09" 或 "legacy"。

選擇要使用的裝飾器提案

注意

Babel 8 將只支援 "2023-11" 和 "legacy"。如果您使用的是其他裝飾器版本，建議移轉至 "2023-11"。

規格儲存庫提供了這些版本的差異的簡要 摘要。

如果您指定 decoratorsBeforeExport 選項，version 預設為 "2018-09"，否則它是一個必要選項。

decoratorsBeforeExport​

此選項

  • 在使用 version: "legacy"、version: "2022-03"、version: "2023-01"、version: "2023-05" 或 version: "2023-11" 時不允許；
  • 在使用 version: "2018-09" 時是必需的；
  • 在使用 version: "2021-12" 時是可選的，預設為 false。

布林值

JavaScript
// decoratorsBeforeExport: false
export @decorator class Bar {}

// decoratorsBeforeExport: true
@decorator
export class Foo {}

此選項最初新增是為了幫助 tc39 從社群收集回饋，允許對建議的語法進行實驗。該提案現已確定允許在 export 之前或之後使用裝飾器。

legacy​

已棄用

請改用 version: "legacy"。此選項是舊別名。

布林值，預設為 false。

使用舊版 (第 1 階段) 裝飾器語法和行為。

注意：與 @babel/plugin-transform-class-properties 的相容性​

如果您手動包含您的外掛程式，並使用類別元素轉換，例如

  • @babel/plugin-transform-class-properties
  • @babel/plugin-transform-private-methods
  • @babel/plugin-transform-private-property-in-object
  • @babel/plugin-transform-class-static-block

請務必讓 @babel/plugin-proposal-decorators 出現在它們之前。

babel.config.json
{
  "plugins": [
-   "@babel/plugin-transform-class-properties",
    ["@babel/plugin-proposal-decorators", { "version": "2023-11" }]
+   "@babel/plugin-transform-class-properties"
  ]
}

如果您已經使用 @babel/preset-env 和第 3 階段的裝飾器，您可以安全移除類別元素轉換，Babel 會在任何預設之前自動套用裝飾器轉換

babel.config.json
{
  "presets": [
    ["@babel/preset-env"],
  ],
  "plugins": [
-   "@babel/plugin-transform-class-properties",
    ["@babel/plugin-proposal-decorators", { "version": "2023-11" }]
  ]
}

如果您使用 @babel/preset-env 和舊版裝飾器，您必須確保類別元素轉換已啟用，不論您的目標為何，因為 Babel 僅在編譯類別屬性的同時支援編譯舊版裝飾器

babel.config.json
{
  "presets": [
    ["@babel/preset-env", {
+     "include": [
+       "@babel/plugin-transform-class-properties"
+     ]
    }],
  ],
  "plugins": [
-   "@babel/plugin-transform-class-properties",
    ["@babel/plugin-proposal-decorators", { "version": "legacy" }]
  ]
}

include 選項會啟用 @babel/preset-env 中包含的轉換，因此您可以安全地從 package.json 中移除它們。

提示

您可以在此處閱讀更多關於設定外掛選項的資訊 here

參考​