前言
在现代前端开发中，使用装饰器进行代码注解已经成为一种不可或缺的方法。然而，在 JavaScript 语言本身并没有原生支持装饰器的情况下，我们需要借助第三方工具来帮助我们完成这个任务。这时候，@gerhobbelt/babel-plugin-syntax-decorators 就变得尤为重要了。
安装
首先，我们需要先安装 babel 解析器和 @gerhobbelt/babel-plugin-syntax-decorators，可以使用 npm 或 yarn 进行安装：
npm install --save-dev @babel/core @babel/cli @gerhobbelt/babel-plugin-syntax-decorators yarn add --dev @babel/core @babel/cli @gerhobbelt/babel-plugin-syntax-decorators
配置
接下来，我们需要在 babel 配置文件中添加 @gerhobbelt/babel-plugin-syntax-decorators 插件，并开启装饰器语法支持：
-- -------------------- ---- -------
-- ---------------
-------------- - -
-------- -
-- ---------
--------------------
--
-------- -
-- -------
---------------------------------------------- -
------------------------- ----
--
-
-需要注意的是，@gerhobbelt/babel-plugin-syntax-decorators 提供了一个重要的选项 decoratorsBeforeExport。默认情况下，该插件会将 export 先转换为普通语句，然后再处理装饰器。如果将该选项设置为 true，则插件就可以在 export 声明前处理装饰器。
示例
最后，让我们看一下如何在代码中使用 @gerhobbelt/babel-plugin-syntax-decorators。
下面是一个简单的示例，我们定义了一个 LogManager 类，并为其添加了一个 logger 装饰器：
-- -------------------- ---- -------
-- --------
-------- -------------- -
---------------- -------------- ----- --- ------------
-
-------
----- ---------- -
------------- -
-------- - --------------------------
-
---------- -
--------------
-
-最终，我们可以使用 babel 将 ES6 代码转换成浏览器可用的代码：
npx babel index.js -o bundle.js
最终，输出的代码会包含我们添加的装饰器代码：
-- -------------------- ---- -------
-- ---------
-------- -------------- -
---------------- -------------- ----- --- ------------
-
--- ---------- - ----- - ------------- - ----- ---------- -
------------- -
-------- - --------------------------
-
---------- -
--------------
-
--- --------
------ - ---------- --总结
通过本文，我们了解了如何使用 @gerhobbelt/babel-plugin-syntax-decorators 来在 JavaScript 代码中支持装饰器语法。希望这篇文章能够帮助大家更好地使用装饰器，并提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f032c0a403f2923b035be05