在现代的前端开发中，使用较多的语言是 JavaScript，而要开发出高质量的 JavaScript 代码，也需要使用各种工具和库来辅助开发。其中，npm 是 JavaScript 世界中最大的包管理器，它能够让开发者轻松地安装、更新、卸载各种前端开发所需的依赖包。而 @babel/plugin-proposal-decorators 这个 npm 包就是其中之一。
什么是 @babel/plugin-proposal-decorators
@babel/plugin-proposal-decorators 是 Babel 编译器的一个插件，它可以将 ES2016 中的装饰器语法转化成 JavaScript。
如果你使用过 TypeScript 的话，那么你肯定知道装饰器是什么。装饰器是一种作为函数修饰符的方法，它可以被附加到类声明、方法、访问符、属性或参数上，起到增强或修改类的行为的作用。
装饰器在 ES2016 中只有提案，还未正式成为语言的一部分。目前，使用 babel-plugin-proposal-decorators 可以使得我们在 JS 中使用或模拟这种语法。这也是该 npm 包的重要作用之一。
如何安装 @babel/plugin-proposal-decorators
如果你已经有了一个项目并且已经安装了 Babel 编译器，那么你可以通过以下步骤来安装 @babel/plugin-proposal-decorators
- 命令行切换到项目根目录下，执行以下命令：
npm install --save-dev @babel/plugin-proposal-decorators
- 在 .babelrc 配置文件中配置插件
@babel/plugin-proposal-decorators 在 Babel 的插件列表中，所以你需要在 .babelrc 配置文件中添加该插件。你可以像下面这样设置 .babelrc：
{
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
]
}
什么是 Babel
Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转成向后兼容的 JavaScript 代码。这种语言转化通常称为“编译”，因此 Babel 有时被称为 JavaScript 编译器。Babel 能够通过语法解析和转换来让开发者使用 ES2015，ES2016 等下一代语法编写代码，同时依然可以运行在当前和旧版本的浏览器等平台。
下面，我们来看一个使用 @babel/plugin-proposal-decorators 编写的示例代码。
-- -------------------- ---- ------- ----- ------- - ---------------- ---------- -- ------------------ ----------- - -------- ----------------------- ----- ----------- - ----------------------- --- ------ ------- -- ----- ----------------------------- ------ ----------- - -------- ------------------------- ----- - ----------------------- --- -------- ------- -- ----- ----------------------------- - --- ---------- - --- ---------- ---------------------- -- ---- ----------- --- ------ -------- -- ----- --------
该示例代码定义了一个 MyClass 类，该类包含了两个装饰器，一个是作用在类方法上的 methodDecorator，另一个是作用在类属性上的 propertyDecorator。当我们初始化 MyClass 类并调用其中任何一个方法或属性时，就会先执行方法或属性的装饰器函数。
需要注意的是，由于装饰器目前并不是 ES 规范中的一部分，因此你需要在 Babel 编译器中安装一些插件才能在 JavaScript 中使用这个功能。
总结
@babel/plugin-proposal-decorators 包对于前端开发者来说是非常有价值的，它使得我们在 JS 中使用或模拟这种语法，虽然装饰器目前不是 ES 规范中的一部分，但是你不再需要等待一个标准为了能够在代码中使用这种语法。
希望这篇文章能够帮助到您，让您更好的使用 npm 包 @babel/plugin-proposal-decorators。如果您有任何疑问，请随时在下面的评论区留言，谢谢！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/98466