在现代的前端开发中，我们经常会使用各种框架和库来快速构建应用程序。这些框架和库往往使用了许多高级特性，其中一个就是 decorators 装饰器。decorators 可以让我们在不修改原有代码的情况下，为函数、类等添加新的功能和行为。
本文将介绍如何在 Babel 中使用 decorators，帮助大家了解这个功能并且能够在项目中应用。
什么是 decorators
decorators 是 ECMAScript 的一个提案，它允许我们在运行时修改类和对象。通过使用 decorators，我们可以在不改变原有代码的情况下，为类和对象添加新的功能，从而实现更加灵活、可复用的代码。
在 JavaScript 中，decorators 是一种函数，它接收三个参数：目标对象、成员或属性名称以及该成员或属性的属性描述符。decorators 函数返回一个新的属性描述符，用于修改目标对象的行为。目标对象可以是类，也可以是对象。
例如，以下代码定义了一个名为 readonly 的 decorator，用于让类的属性变成只读：
-- -------------------- ---- ------- -------- ---------------- ---- ----------- - ------------------- - ------ ------ ----------- - ----- ------- - --------- ---- - -- -
在这个例子中，我们使用了 @readonly 来修饰 prop 属性，从而使它成为只读属性。
Babel 如何支持 decorators
虽然 decorators 是 ECMAScript 的一个提案，但是它并不是 JavaScript 语言的标准。因此，在当前的浏览器中，不能直接使用 decorators。但是，我们可以通过 Babel 转换 decorators 为普通的 JavaScript 代码。这样，在使用 decorators 的代码经过 Babel 转换后，就可以被所有支持 ES6 的浏览器以及 Node.js 等环境运行。
要在 Babel 中支持 decorators，我们需要使用 @babel/plugin-proposal-decorators 插件。该插件是 Babel 官方提供的 decorators 转换插件，可以帮助我们将使用 decorators 的代码转换为普通的 JavaScript 代码。
使用 @babel/plugin-proposal-decorators 插件非常简单。首先，我们需要安装该插件：
npm install --save-dev @babel/plugin-proposal-decorators
接着，我们需要在 babel 配置文件中添加该插件：
{
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }]
]
}在上面的配置中，我们设置了 legacy 选项为 true，表示使用装饰器时使用旧版的语法，而不是最新的提案标准。这是因为最新的 decorators 标准还没有被所有浏览器和运行时环境支持，因此我们需要使用一个兼容性更好的语法。
如何使用 decorators
有了 @babel/plugin-proposal-decorators 插件的支持，我们就可以在代码中使用 decorators 了。在使用 decorators 时，我们需要注意一些细节。
首先，我们需要在使用 decorators 的文件中添加以下代码：
import { enableDecorators } from 'mobx/lib/mobx';
enableDecorators();这是因为 decorators 是从 MobX 项目中提取出来的，如果我们不调用 enableDecorators 函数，decorators 就无法正常工作。
接下来，我们可以使用 decorators 来修饰函数、类、属性等。例如，以下是一个使用 decorators 修饰类的示例：
-- -------------------- ---- -------
-------- -------------- -
------ -------- -------- -
--------------
-----------------
-------
--
--
-
--------
------- - --------------------- -
--
----- ------- -
-在这个例子中，我们使用了 @mixin 创建了一个 mixin，它将一个对象中的所有属性按照键值对的形式合并到类的原型中。接着，我们使用 @mixin 来修饰 MyClass，从而将 mixin 的所有属性添加到 MyClass 的原型中。
总结
decorators 是 ECMAScript 提案中的一个功能，它可以让我们在不改变原有代码的情况下，为类和对象添加新的功能。在 JavaScript 中，decorators 是通过 Babel 转换为普通的 JavaScript 代码，并且需要使用 @babel/plugin-proposal-decorators 插件来支持。在使用 decorators 时，我们需要注意一些细节，例如需要调用 enableDecorators 函数，需要使用旧版的语法等。通过学习本文，相信大家已经掌握了如何在 Babel 中使用 decorators，并且可以应用到实际项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a4d26f48841e98941372da
