Decorator 是 ES7 中的一个新语法，它是 JavaScript 中一种编写可重用代码的方式，可以在类声明和方法中添加元数据，最终使得代码更加简洁、易读、易维护。虽然它还处于提案阶段，但许多开发者已经开始尝试使用它。在本文中，我们将讲解如何在 Babel 中使用 Decorator 语法。
准备工作
首先，我们需要确保本地环境中已经安装了 Babel 转译器。我们可以通过 Node.js 的包管理器 npm 或者 Yarn 来安装 Babel。如果你还没有安装 Node.js，你需要先在你的操作系统上安装 Node.js 以及 npm。
我们可以通过以下命令安装 babel 和相关 packages：
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/plugin-proposal-decorators
其中，@babel/cli 包提供了 Babel 命令行工具，@babel/preset-env 包提供了转译器插件，即预设集合，用来转译新特性，@babel/plugin-proposal-decorators 则提供了 Decorator 语法转译插件。
配置 babel.config.js
在安装完以上 packages 之后，我们需要在项目根目录下创建 babel.config.js 文件，并配置 babel 转译器。具体配置如下：
-- -------------------- ---- -------
-------------- - -
---------- -
--------------------- -
---------- -
------- ---------
-
--
--
---------- -
------------------------------------- - --------- ---- ---
------------------------------------------ -
-
-在这里，我们使用了 @babel/preset-env 和 @babel/plugin-proposal-decorators 这两个预设来转译 Decorator 语法以及其他新特性，将转译后的代码设置为当前版本的 Node.js 可以执行的版本。
另外我们还使用了 @babel/plugin-proposal-class-properties 插件，在 class 中添加直接赋值的语法糖，从而更方便地定义实例属性。
开始使用 Decorator
配置好了 Babel 转译器之后，我们就可以在项目中开始使用 Decorator 了。
- 类装饰器
类装饰器是更高级别的装饰器，用于装饰一个类。我们可以在类的声明前，加上 @<decorator>，来添加元数据。
@logTitle('Demo Title')
class DemoClass {
constructor() {}
@logMethod('Demo Method')
demoMethod() {}
}在这个例子中，logTitle 和 logMethod 都是一些处理装饰器的方法。它们可以添加一些元数据，例如在 logTitle 中添加了一个 title 属性，用来存储类的标题。
- 方法装饰器
方法装饰器应用于类的一段代码，用于装饰一个方法。我们可以在方法前添加 @<decorator>，实现一些诸如 log、@debounce、@throttle 这样的装饰器。
class DemoClass {
...
@logMethod('Demo Method')
demoMethod() {}
}在这个例子中，我们使用了一个叫 logMethod 的装饰器，在方法执行前打印出方法名以及其他元数据的信息。
- 属性装饰器
属性装饰器应用于声明在类中的属性。我们可以在属性前添加 @<decorator>。
class DemoClass {
@readonly propName = 'value'
}在这个例子中，我们使用了一个叫 readonly 的装饰器，代表该属性是只读的。
总结
在本文中，我们讲解了如何在 Babel 中使用 Decorator 语法，涉及到预设集合以及添加装饰器的示例代码。Decorator 是一个强大的工具，可以让开发者更好地把控代码的可读性和可维护性，让代码更加优美、精简、简洁。希望读者们能够从本文中学到更多关于 Decorator 的内容，并在实际开发中使用 Decorator 语法，提升自己和团队的代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64bf74d89e06631ab9bd1a64