前言
ES6 带来了许多优秀的新特性，比如箭头函数、解构赋值、类等。但是，在 JavaScript 社区中，我们总是渴望更多的便利与特性。一种流行的特性，就是装饰器（Decorator）。
装饰器是一种函数，可以用于修改类、方法、属性等，以实现元编程（metaprogramming），也就是编写代码来处理代码。简单来说，就是让我们可以在不修改已有代码的情况下，为其添加新功能。
在本文中，我们将介绍如何通过使用 Babel 编译 ES6 代码，来支持 Decorator 语法。
使用 Babel 编译 ES6 代码
Babel 是一个 JavaScript 编译器，可以将 ES6 代码转换为 ES5 代码，以在所有浏览器中运行。它还可以转换 JSX、TypeScript、Flow 等。
首先，我们需要安装 Babel。在终端中输入以下命令：
npm install --save-dev babel-cli babel-preset-env
安装完成后，我们需要在项目根目录下创建一个名为 .babelrc 的文件。该文件用于配置 Babel，告诉它要对哪些特性进行转换。
我们需要在该文件中添加如下内容：
-- -------------------- ---- -------
-
---------- -
------- -
---------- -
----------- ------ - ---------- --- -- ----
-
--
-
-上述配置告诉 Babel 使用 env 预设，并使用 last 2 versions 和 ie >= 10 作为目标浏览器。这将使 Babel 转换代码，以使其在这些浏览器中运行。
接下来，我们需要在项目中创建一个文件夹 src，并在其中创建一个名为 index.js 的文件。在 index.js 中，我们可以编写一些 ES6 代码。
作为示例，我们在 src/index.js 文件中编写如下代码：
-- -------------------- ---- -------
----- ------- -
----
---------- -
------------------- ---------
-
-
-------- ----------- ----- ----------- -
----- -------- - -----------------
---------------- - ----------------- -
-------------------- ------- ------ ---------
------ -------------------- ------
--
------ -----------
-这是一个简单的类，其中包含一个带有装饰器的方法。装饰器 @log 会将 myMethod 方法的参数和返回值输出到控制台。
现在，让我们使用 Babel 编译 src/index.js 文件。在终端中输入以下命令：
./node_modules/.bin/babel src --out-dir dist
上述命令告诉 Babel 将 src 目录中的所有文件转换为 ES5 代码，并将其输出到 dist 目录中。
现在，我们可以在 dist/index.js 文件中查看转换后的代码。它应该如下所示：
-- -------------------- ---- -------
---- --------
--- -------
-------- --------------------------------- --------- ----------- ----------- -------- -
--- ---- - ---
---------------------------------------- ----- -
--------- - ----------------
---
--------------- - ------------------
----------------- - --------------------
-- -------- -- ---- -- ----------------- -
------------- - -----
-
---- - -------------------------------------------- ------ ---------- -
------ ----------------- --------- ----- -- -----
-- ------
-- -------- -- ---------------- --- ---- -- -
---------- - ---------------- - ------------------------------ - ---- --
---------------- - ----------
-
-- ----------------- --- ---- -- -
----------------------------- --------- ------
---- - -----
-
------ -----
-
-------- ----------- ----- ----------- -
--- -------- - -----------------
---------------- - -------- -- -
-------------------- - - ---- - - ------ --------------------------
------ -------------------- -----------
--
------ -----------
-
--- ------- - ------- - -------- --------- -
--------------------------------- ---------
-- -------------------------------------------- ----------- ------ ------------------------------------------------- ------------ ------------------- --------如您所见，装饰器已经被成功转换为 ES5 代码。
如何支持 Decorator 语法
虽然在使用 Babel 编译 ES6 代码时，可以将装饰器转换为 ES5 代码。但是，Babel 默认情况下不会支持 Decorator 语法。如果我们想要在项目中使用 Decorator 语法，我们需要安装相应的插件。
在终端中输入以下命令来安装该插件：
npm install --save-dev babel-plugin-transform-decorators-legacy
安装完成后，在 .babelrc 文件中添加如下内容：
-- -------------------- ---- -------
-
---------- -
------- -
---------- -
----------- ------ - ---------- --- -- ----
-
--
--
---------- -------------------------------
-上述配置告诉 Babel 使用 transform-decorators-legacy 插件，以支持 Decorator 语法。
我们可以在示例代码中添加更多的装饰器，以便更好地理解 Decorator 语法的用途：
-- -------------------- ---- -------
-------
----- ----- -
--------- --
--------- --
-------------- -- -
------ - --
------ - --
-
--------------------
-----------
---------- -
------ ------------ ------------
-
-
-------- -------------- -
----------------------
-
-------- ---------------- ----- ----------- -
------------------- - ------
------ -----------
-
-------- ------------------- -
------ ---------------- ----- ----------- -
----------------------- - ------
------ -----------
--
-
-------- ------------------ ----- ----------- -
--------------------- - -----
------ -----------
-上述示例代码定义了一个 Point 类，其中包含了多个装饰器。装饰器 @frozen 将类冻结，无法对其进行修改；装饰器 @readonly 将类中的属性设为只读；装饰器 @configurable(false) 和 @enumerable 用于控制方法的可操作性和可列举性。
结论
在本文中，我们介绍了如何使用 Babel 编译 ES6 代码，并如何支持 Decorator 语法。通过使用 Babel，我们可以在所有浏览器中运行使用了最新特性的 JavaScript 代码，并实现了一些高级的元编程功能。
装饰器是一种非常实用的 JavaScript 功能，可以方便地实现元编程功能。将装饰器与 Babel 结合使用，可以轻松地在项目中使用 Decorator 语法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6719edf2c30a6eff8b882cf8