在现代的前端开发中，JavaScript 语言的使用越来越广泛，为了更好的组织和管理代码，前端开发者们不断地寻找一些新的技术和工具。其中，装饰器（Decorators）这一功能强大的特性能够帮助我们更好地组织代码和实现复用。在本篇文章中，我们将学习如何在 Babel 中使用装饰器。
什么是装饰器？
装饰器是一种 JavaScript 的语言特性。它是一种能够装饰或修改类和类成员的语法，可以说是某种程度上的“语法糖”。它可以将一些通用的功能封装成装饰器，以便在多个地方重复使用。它的语法十分简单，使用@符号后直接紧接着装饰器函数名称，如下所示：
@decorator
class MyClass {}装饰器可以修饰类，类的属性和方法。在实际的开发中，我们可以用装饰器来实现一些常见的功能，比如属性的只读、方法的日志记录、属性的缓存、扩展 React 类组件等。接下来，我们将学习如何在 Babel 中使用装饰器。
如何在 Babel 中使用装饰器？
Babel 是一个帮助我们将 ECMAScript 2015+ 版本的代码编译成浏览器可识别的代码的工具，同时也提供了装饰器的插件，可以帮助我们在项目中使用装饰器。下面我们将介绍如何在 Babel 中配置装饰器插件。
安装@babel/plugin-proposal-decorators插件
首先，我们需要安装 @babel/plugin-proposal-decorators 插件。
npm install --save-dev @babel/plugin-proposal-decorators
修改 .babelrc 配置文件
在项目的根目录或者项目的 src 目录下，找到并打开 .babelrc 文件，然后添加以下代码：
{
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }]
]
}这一步的作用是启用装饰器插件，并且设置它在 legacy 模式下运行。这确保了插件能够在项目中正常工作。
创建装饰器
现在我们已经完成了在 Babel 中启用装饰器的设置，现在我们可以编写自己的装饰器了。下面是一个示例装饰器的代码：
// javascriptcn.com 代码示例
function readonly(target, name, descriptor) {
descriptor.writable = false;
return descriptor;
}
class MyClass {
@readonly
myMethod() {
// ...
}
}这个装饰器名为 readonly，它旨在将目标方法设置为只读。在这个示例中，我们将目标方法 myMethod 作为参数传递给装饰器函数，在装饰器函数中，我们将方法的 writable 属性设置为 false，这样就达到了只读的效果。最后，我们返回修改过的属性描述符对象 descriptor，从而应用了修改。
总结
通过本文的学习，我们对装饰器的基础知识有了一定的了解，并且也学习了如何在 Babel 中使用装饰器。在实际的开发中，装饰器的使用能够帮助我们实现很多常见的功能，提高代码的可读性和可维护性，在项目中能够大大提高我们的工作效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6549a2e57d4982a6eb3dcaae