介绍
babel-plugin-transform-decorators-legacy-without-clutter 是一个 babel 插件，能够支持 ES7 中的装饰器语法。它与 babel-plugin-transform-decorators-legacy 不同的一个点是，它不会在转换后的代码中插入冗余代码（clutter）。
装饰器语法是一种语法糖，可以在类或者对象上增加额外的功能，这在前端开发中非常有用。然而，由于装饰器语法并没有得到广泛支持，需要使用 babel 来转换代码，使其兼容性更好。
安装
首先需要安装 babel：
--- ------- --------- -- --- ------- ---------------- ---------- --- ------- -------------------------------------------------------- ----------
使用
在命令行中执行以下命令：
----- --- --------- --- --------- --- --------- -------------------------------------------
这个命令会将 src 下的文件转换成 ES5 语法，并且将转换后的代码存到 lib 目录下。
示例
下面是一个使用装饰器语法的示例代码：
------ - ---------- - ---- ------ ----- ------ - ----------- ---- - ------- - ----- ------ - --- -------- ------------------------ -- -------
我们在 Person 类的 name 属性前面使用了一个 observable 装饰器，用来使其成为可观察状态的。
转换后的代码如下：
------ - ---------- - ---- ------
----- ------ -
------------- -
--------- - -------
-
-
---------------------------- ------- - ------------- ----- ----------- ----- ------------ ---- --
----- ------ - --- --------
------------------------ -- -------我们可以看到转换后的代码中，没有插入冗余代码（clutter）。这不仅能够减小代码体积，还能提升代码的执行效率。
总结
babel-plugin-transform-decorators-legacy-without-clutter 是一个能够支持 ES7 装饰器语法的 babel 插件。它不会在转换后的代码中插入冗余代码，能够提升代码的执行效率。在实际项目开发中，使用装饰器语法能够极大地提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005601181e8991b448de048