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

@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.0version: "2023-11"のサポートを追加
v7.22.0version: "2023-05"のサポートを追加
v7.21.0version: "2023-01"のサポートを追加
v7.19.0version: "2022-03"のサポートを追加
v7.17.0"2021-12", "2018-09", "legacy"をサポートするversionオプションを追加

version​

"2023-11", "2023-05", "2023-01", "2022-03", "2021-12", "2018-09" または "legacy"。

使用するデコレーターの提案を選択します

  • "2023-11"は、2023年11月のTC30会議で合意に達した更新後の提案バージョンで、この変更を統合しています。
  • "2023-05"は、2023年3月と5月のTC39会議で合意に達した更新後の提案バージョンで、これらの変更を統合しています。
  • "2023-01"は、2023年1月のTC39会議で合意に達した更新後の提案バージョンで、pzuraq/ecma262#4を統合しています。
  • "2022-03"は、2022年3月のTC39会議でステージ3に到達した提案バージョンです。詳細については、tc39/proposal-decorators@8ca65c046dを参照してください。
  • "2021-12"は、2021年12月にTC39に提示された時点の提案バージョンです。詳細については、tc39/proposal-decorators@d6c056fa06を参照してください。
  • "2018-09"は、2018年9月にTC39に提示され、最初にステージ2に昇格した提案バージョンです。詳細については、tc39/proposal-decorators@7fa580b40fを参照してください。
  • legacyは、wycats/javascript-decorators@e1bf8d41bfで定義されたレガシーステージ1の提案です。レガシーモードには機能更新がなく、BabelとTypeScriptの間に既知の不一致があります。"2023-11"の提案に移行することをお勧めします。
注意

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"を使用してください。このオプションはレガシーエイリアスです。

boolean、デフォルトは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から安全に削除できます。

ヒント

プラグインオプションの設定の詳細については、こちらを参照してください

参考文献​