简介
在使用 JavaScript 进行开发的过程中，我们经常会使用 ES6 提供的 class 和装饰器语法来简化代码，增加可读性，但是由于浏览器对于 ES6 的支持程度不尽相同，而且装饰器语法本身也有一些缺陷，这就给前端开发带来了一些困扰。此时，一个叫做 babel-plugin-undecorate 的 npm 包就应运而生了，它可以把装饰器语法转换成普通的 JavaScript 代码，让我们的代码可以在更多的浏览器和环境中运行。
安装
在使用 babel-plugin-undecorate 之前，你需要先安装 babel。如果你还没有安装 babel，可以使用以下命令进行安装：
npm install --save-dev babel-cli babel-core babel-plugin-undecorate
其中，--save-dev 参数表示将 babel 安装为开发依赖。
配置 babelrc
安装完 babel 后，我们需要在项目根目录创建一个 .babelrc 文件，用于配置 babel 插件。打开 .babelrc 文件，在其中添加以下配置：
{
"plugins": [
"undecorate"
]
}这里，我们只需要启用一个叫做 undecorate 的插件就可以了，babel 会在编译时自动加载该插件。
示例代码
下面是一个使用装饰器语法的示例代码：
-- -------------------- ---- -------
----- ------- -
----
-------- -
------------------- ---------
-
-
-------- ----------- ----- ----------- -
----- -------- - -----------------
---------------- - ----------------- -
-------------------- ------- ------ ---------
------ -------------------- ------
--
------ -----------
-可以发现，我们在 MyClass 的 method 上使用了 @log 装饰器，该装饰器会在每次调用 MyClass 实例的 method 方法时打印一个日志。
将该示例代码保存为 example.js 文件，使用以下命令进行转换：
babel example.js --out-file output.js
运行该命令后，babel 会将 example.js 文件中的装饰器语法转换成普通的 JavaScript 代码，并输出到 output.js 文件中。转换后的代码如下所示：
-- -------------------- ---- -------
----- ------- -
------------- -
----------- - ---------------- --------------------------
-
-
-------- ------ -
----- ------ - ---------------- -- - - --------- - -------------
----- ---- - ---------------- -- - - --------- - -------------
----- ---------- - ---------------- -- - - --------- - -------------
----- -------- - -----------------
---------------- - -------- --------- -
-------------------- ------- ------ ---------
------ -------------------- ------
--
------ -----------
-
-------- ------------------ ------- -
----- -- - ------------ -- -------
----- ---- - --------------------
----- ---------- - --------------------------------------- --------
--- ------ --- -- ----- -
-- ---- --- ------------ -
---------
-
----- -------------- ----------- ------ - ----------------------------------- -----
----------------------------- ---- -
-------------
-----------
-----
---
-
------ ---------------- - ----------------------------- - ----------------
-
------------------------ - ---------------------------------在转换后的代码中，@log 装饰器被转换成了 _log() 函数的调用，这个函数会返回一个包装了原始方法的新方法。此外，在 MyClass 的 constructor 中，也增加了一行代码 this.method = undecorate(this, MyClass.prototype.method);，用于将包装后的方法赋值给 MyClass 实例的 method 属性。
结论
通过使用 babel-plugin-undecorate，我们可以轻松地将装饰器语法转换成普通的 JavaScript 代码，让我们的代码可以在更多的浏览器和环境中运行。使用 babel-plugin-undecorate 的方法也非常简单，只需要安装 babel 和该插件，然后在 .babelrc 文件中启用该插件即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f81238a385564ab6b93