ES7 decorator 是 ECMAScript 2016 提案中的一个重要特性，它可以让我们在类和类成员上添加注解，用来描述它们的行为和属性。但是，由于 decorator 还没有被正式纳入标准，因此目前只有少数的 JavaScript 引擎支持它，而大多数浏览器和 Node.js 版本都不支持，这就需要使用 Babel 来进行转换。
在本文中，我们将详细介绍如何使用 Babel 转换 ES7 decorator 特性，包括 Babel 的安装、配置和使用，以及一些常见的 decorator 示例代码。
Babel 的安装和配置
Babel 是一个 JavaScript 编译器，它可以将最新的 JavaScript 语法转换成目前大多数浏览器和 Node.js 版本都支持的语法。要使用 Babel 转换 ES7 decorator 特性，我们需要安装 Babel 和相关的插件。
安装 Babel
首先，我们需要在项目中安装 Babel。可以使用 npm 命令来安装 Babel：
npm install --save-dev @babel/core @babel/cli
这将安装 Babel 的核心库和命令行工具。
配置 Babel
接下来，我们需要在项目中创建一个 .babelrc 文件来配置 Babel。这个文件应该放在项目的根目录下。
.babelrc 文件的内容如下：
-- -------------------- ---- -------
-
---------- -
-------------------
--
---------- -
------------------------------------
-----------------------------------------
-
-这个配置文件告诉 Babel 使用 @babel/preset-env 预设来转换最新的 JavaScript 语法，并且使用 @babel/plugin-proposal-decorators 和 @babel/plugin-proposal-class-properties 插件来支持 decorator 特性。
使用 Babel 转换 decorator 特性
现在我们已经安装好了 Babel，并且配置好了用来转换 decorator 特性的插件。接下来，我们可以在代码中使用 decorator 了。
类 decorator
我们可以使用 @ 符号来定义一个类 decorator，它会被应用到整个类上。例如：
@log
class MyClass {
// ...
}上面的代码中，@log 是一个类 decorator，它将被应用到 MyClass 类上。我们可以在 @log 函数中添加一些逻辑来记录类的行为。
我们需要在 Babel 的配置文件中添加 @babel/plugin-proposal-decorators 插件来支持类 decorator。在配置文件中添加这个插件后，Babel 将会自动将类 decorator 转换成普通的 JavaScript 代码。
方法 decorator
我们也可以使用 @ 符号来定义一个方法 decorator，它会被应用到一个类方法上。例如：
class MyClass {
@readonly
method() {
// ...
}
}上面的代码中，@readonly 是一个方法 decorator，它将被应用到 MyClass 类的 method 方法上。我们可以在 @readonly 函数中添加一些逻辑来检查方法是否被修改。
我们需要在 Babel 的配置文件中添加 @babel/plugin-proposal-decorators 插件来支持方法 decorator。在配置文件中添加这个插件后，Babel 将会自动将方法 decorator 转换成普通的 JavaScript 代码。
属性 decorator
我们还可以使用 @ 符号来定义一个属性 decorator，它会被应用到一个类属性上。例如：
class MyClass {
@nonenumerable
prop = 123;
}上面的代码中，@nonenumerable 是一个属性 decorator，它将被应用到 MyClass 类的 prop 属性上。我们可以在 @nonenumerable 函数中添加一些逻辑来控制属性的可枚举性。
我们需要在 Babel 的配置文件中添加 @babel/plugin-proposal-class-properties 插件来支持属性 decorator。在配置文件中添加这个插件后，Babel 将会自动将属性 decorator 转换成普通的 JavaScript 代码。
总结
在本文中，我们介绍了如何使用 Babel 转换 ES7 decorator 特性。我们首先安装了 Babel 和相关的插件，然后配置了 Babel，使其支持 decorator 特性。最后，我们给出了一些常见的 decorator 示例代码，包括类 decorator、方法 decorator 和属性 decorator。
使用 decorator 可以让我们更加方便地描述类和类成员的行为和属性，这对于开发复杂的应用程序非常有用。虽然 decorator 还没有被正式纳入标准，但是它已经得到了广泛的支持和使用。通过使用 Babel，我们可以在现有的 JavaScript 环境中使用 decorator，而无需等待所有浏览器和 Node.js 版本都支持它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662f0723d3423812e4cfe20d