跳转到主要内容

@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"。

选择要使用的 decorators 提案

注意

Babel 8 将仅支持 "2023-11" 和 "legacy"。如果您使用的是其他 decorators 版本，建议迁移到 "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 阶段）decorators 语法和行为。

注意：与 @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 阶段 decorators，则可以安全地删除类元素转换，Babel 会在任何预设之前自动应用 decorators 转换

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

如果您正在使用 @babel/preset-env 和旧版 decorators，则必须确保无论您的目标是什么，都启用了类元素转换，因为 Babel 仅在编译类属性时才支持编译旧版 decorators

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 中删除它们。

提示

您可以在此处阅读有关配置插件选项的更多信息

参考​