Edit

@babel/plugin-proposal-decorators

示例

(该示例来源于提案中)

简单的类装饰器（class decorator）

@annotation
class MyClass {}

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

类装饰器（class decorator）

@isTestable(true)
class MyClass {}

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

类函数装饰器（class function decorator）

class C {
  @enumerable(false)
  method() {}
}

function enumerable(value) {
  return function(target, key, descriptor) {
    descriptor.enumerable = value;
    return descriptor;
  };
}

安装

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

用法

使用配置文件（推荐）

{
  "plugins": ["@babel/plugin-proposal-decorators"]
}

通过 CLI 使用

babel --plugins @babel/plugin-proposal-decorators script.js

通过 Node API 使用

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

选项

History

Version	Changes
v7.17.0	Added the version option with support for "2021-12", "2018-09" and "legacy"

version

"2021-12", "2018-09" or "legacy". Defaults to "2018-09".

Selects the decorators proposal to use:

• "2021-12" is the proposal version as it was presented to TC39 in Dec 2021. You can read more about it at tc39/proposal-decorators@d6c056fa06.
• "2018-09" is the proposal version that was initially promoted to Stage 2 presented to TC39 in Sept 2018. You can read more about it at tc39/proposal-decorators@7fa580b40f.
• legacy is the original Stage 1 proposal, defined at wycats/javascript-decorators@e1bf8d41bf.

decoratorsBeforeExport

This option:

• is disallowed when using version: "legacy";
• is required when using version: "2018-09";
• is optional and defaults to false when using version: "2021-12".

boolean

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

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

添加该选项是为了针对于两种可能的语法进行实验，帮助 TC39 收集社区的反馈。

欲了解更多信息，请查阅：tc39/proposal-decorators#69.

legacy

⚠️ 弃用：使用 version: "legacy" 代替。此选项是一个遗留的别名。

boolean，默认为 false

使用历史遗留（stage 1）的装饰器中的语法和行为。

注意：@babel/plugin-proposal-class-properties 的兼容性问题

如果你手动引用了插件 @babel/plugin-proposal-class-properties 并使用了它，请确保在引用 @babel/plugin-proposal-class-properties 之前引用 @babel/plugin-proposal-decorators。

错误示例：

{
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    ["@babel/plugin-proposal-decorators", { "legacy": true }]
  ]
}

正确示例：

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    "@babel/plugin-proposal-class-properties"
  ]
}

你可以通过该链接了解更多插件配置选项。

参考

• 提案：JavaScript 装饰器