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