介绍
ES7 Decorator 是一种用于扩展 JavaScript 类和对象的新语法。它可以让我们编写更具表现力和模块化的代码。然而，ES7 Decorator 目前还没有被主流浏览器支持。为了实现跨浏览器的兼容性，我们通常需要使用 Babel 来将 ES7 Decorator 编译为 ES6 或者 ES5 代码。本文将介绍如何使用 Babel 来编译 ES7 Decorator。
Babel 和 babel-plugin-transform-decorators
Babel 是一个通用的 JavaScript 编译器，可以将 ES6 或者 ES7 代码转换为浏览器可以运行的 ES5 代码。为了支持 ES7 Decorator，我们需要使用 babel-plugin-transform-decorators 插件。该插件将 ES7 Decorator 转换成了 ES5 代码，使得所有浏览器都能够支持。接下来，我们将介绍如何配置 babel-plugin-transform-decorators 插件。
配置 babel-plugin-transform-decorators
首先，我们需要安装 babel-plugin-transform-decorators 插件：
npm install babel-plugin-transform-decorators --save-dev
然后，在 .babelrc 配置文件中，我们需要添加如下代码：
{
"presets": ["env"],
"plugins": [
["transform-decorators", { "legacy": true }]
]
}在这个配置中，env 是一个 Babel 的预设，用于转换 ES6 或者 ES7 代码为 ES5 代码。transform-decorators 插件将 ES7 Decorator 转换为 ES5 代码。legacy 的值设置为 true，是指使用了非标准的 Decorator 语法，如果使用了标准的 Decorator 语法，则需要将 legacy 的值设置为 false。
示例代码
下面的示例代码演示如何使用 ES7 Decorator，以及如何使用 Babel 编译：
-- -------------------- ---- -------
-- ---- ---------
-------- ----------- -
-------------------- - ------------- -
-----------------
--
-
-- -- ---------
----
----- ------ -
----------------- -
--------- - -----
-
-
-- ---- ------ --
----- ------ - --- ----------------
-- -- --- --
------------------ ---------
-- ------
---- --------
-------- ------------------------- ------------ - -- ----------- ---------- ------------- - ----- --- ----------------- ---- - ----- -- - ----------- - -
-------- ----------- -
-------------------- - -------- ----- -
-----------------
--
-
--- ------ - ----- - ------------ ----------- - -------- ------------ -
--------------------- --------
--------- - -----
-- -- --------
--- ------ - --- ----------------
------------------ ---------结论
ES7 Decorator 可以帮助我们编写更具表现力和模块化的代码，但是目前还没有得到主流浏览器的支持。为了实现跨浏览器的兼容性，我们可以使用 Babel 来将 ES7 Decorator 编译为 ES6 或者 ES5 代码。通过配置 babel-plugin-transform-decorators 插件，我们可以轻松编译包含 ES7 Decorator 的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6732c8480bc820c5823ed473