Babel7 将 decorators 视为实验性功能的解决方法-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，Babel 是一个非常重要的工具，它可以帮助开发者将最新的 JavaScript 语法转换为更为兼容的代码，从而让应用在更多的浏览器中运行。

在 Babel7 中，decorators（即装饰器）被视为实验性功能。这意味着，虽然我们可以使用它们来实现一些有趣的功能，但是它们可能会在以后的版本中发生变化，甚至被删除。

那么，Babel7 中的 decorators 怎么用呢？接下来我们将详细介绍。

安装依赖

Babel7 中的 decorators 功能需要使用 @babel/plugin-proposal-decorators 插件，因此首先需要安装这个插件：

npm install --save-dev @babel/plugin-proposal-decorators

同时，为了支持 class 类型的 decorators，还需要安装 @babel/plugin-proposal-class-properties 插件：

npm install --save-dev @babel/plugin-proposal-class-properties

配置 Babel

安装好依赖之后，我们需要在 Babel 的配置文件中添加这两个插件：

// javascriptcn.com 代码示例
{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}

其中，@babel/plugin-proposal-decorators 的 legacy 参数设置为 true，表示我们将使用 Babel6 中的 decorators 语法。

@babel/plugin-proposal-class-properties 的 loose 参数设置为 true，表示我们将使用一种更快、更简单的方式来实现 class 属性。

使用 decorators

接下来，我们来看一个使用 decorators 的例子：

function testable(target) {
  target.isTestable = true;
}

@testable
class MyTestableClass {}

console.log(MyTestableClass.isTestable); // true

在上面的代码中，我们首先定义了一个 decorators 函数 testable，它接受一个参数 target，表示被修饰的类。

然后，在类定义之前使用 @testable，就可以将 MyTestableClass 类传入我们的 decorators 函数中，并添加一个属性 isTestable。

最后，我们使用 console.log 输出了 isTestable 属性的值，可以看到结果为 true，说明 decorators 生效了。

总结

Babel7 中的 decorators 功能虽然被视为实验性功能，但是它们可以帮助我们实现一些有趣的功能，例如给类添加属性、给方法添加注释等。

当然，在使用 decorators 时需要注意，一定要安装好必要的依赖，并在 Babel 配置文件中设置相关的插件。另外，在使用 decorators 时也要注意其可能发生变化的情况，以免造成不必要的麻烦。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/658639c0d2f5e1655d09cc39