装饰器的定义
装饰器（Decorator）是一种用来修饰类、方法、属性等的语法。在 es7 之前，修饰类、方法、属性等常常采用继承、混合等方式实现。而在 es7 中，标准中提供了装饰器语法，用户可以更加简单、直观的声明和使用类、方法、属性等的修饰器。
Babel-plugin-transform-decorators-legacy 简介
早期版本的 Babel 支持装饰器语法通过 babel-plugin-syntax-decorators 来实现，但并不支持转译。直到后来，babel-plugin-transform-decorators-legacy 插件开始支持装饰器的转译。与其他转译器相比，它允许多个装饰器函数同时修饰同一个目标。
如何使用
要使用 babel-plugin-transform-decorators-legacy 插件，需要先安装 babel 相关的依赖。
npm install --save-dev @babel/core babel-loader @babel/preset-env babel-plugin-transform-decorators-legacy
在 webpack 中使用该插件:
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- --------
-------- -----------------
---- -
------- ---------------
-------- -
-------- ----------------------
-------- ------------------------------- -- ----
-
-
-
-
-
-示例代码
-- -------------------- ---- -------
----
----- ------- -
----------------- -
--------- - -----
-
---------
-------- -
------ ----- ------
-
-
-------- ---------------- ----- ----------- -
------------------- - ------
------ -----------
-
-------- ----------- -
-------------------
-
----- ---------- - --- ----------- -----------
--------------------------------- -- ---- ----
----------------- - ---------- -
------ ---- ---- ------
-
--------------------------------- -- ---- ----在上述代码中，使用 @log 装饰器修饰了 MyClass 类，@readonly 修饰了 method 方法。
指导意义
现在，许多框架都支持装饰器的使用，例如 vue，nuxt 等。通过使用 Babel-plugin-transform-decorators-legacy，我们能够在旧版本的浏览器上使代码运行起来。因此，这个插件具有重要意义。
此外，在编写代码时，提倡将装饰器按照其作用分门别类，把相同作用的装饰器放在一个文件中，遵循单一功能原则，避免出现体积过大的文件。
使用装饰器的前提是熟悉 Javascript 中的原型链、对象、函数等概念，并具备一定的编程经验。了解装饰器语法可以让我们在编写代码时能够更加优雅地书写代码，提高代码的可读性和可维护性。
总结
本文主要介绍了使用 Babel-plugin-transform-decorators-legacy 处理装饰器的方式，同时也对装饰器语法及其指导意义做了一些总结。最后，提醒读者在撰写代码时注意规范，以避免不必要的问题和意外。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653477247d4982a6eb8fd9c6