前言
通过装饰器语法，我们可以很方便地向一个类或一个函数添加一些元数据，或者改变其行为。在 ES6 中，装饰器语法是在 ECMAScript Stage 1，也就是提议阶段，但是因为其实用性和实用性在逐渐被认可，所以 TypeScript 也接踵而至地支持了装饰器语法。但是在 ES6 中，装饰器语法在本质上还没有得到实现，所以在 ES6 或者 TypeScript 项目中使用装饰器语法，需要通过 Babel 编译器来将其转换成可以在浏览器中运行的代码。
Babel7 是当前的主要的最新版本，但是在 Babel7 中的新版本 @babel/plugin-proposal-decorators 与旧版本的 @babel/plugin-transform-decorators-legacy 在装饰器语法的转译方面存在问题。下面就是在 Babel7 升级后出现的装饰器转译问题及其解决方法。
转译问题
旧版装饰器语法和新版装饰器语法的区别
在 ES7 之前，有一份提案，被称为 Decorators，用于在类和对象之上添加元数据，帮助我们更方便的实现一些 JS 特性。
在这个提案出现之后，很多开发者热衷于使用这个新的语法，不过一直到了 ES7，这个提案还是没有得以实现。
但是 babel-plugin-transform-decorators-legacy 这个插件让人们可以在旧版的 Babel 里面启用 Decorators 装饰器语法。这个插件将一个完整的流程重新实现，来让这个语法正常地工作。
不过问题是这个插件在应对大规模的、复杂的装饰器语法时，每一个实现方法都会变费时间。解析持数型的参数显然不短，而且还有很多问题。
比如以下代码：
-------------- ----- ------- --
如果你用了 babel-plugin-transform-decorators-legacy 后 JS 最终被转译为：
--- ------- - -------- --------- --- ------- - ---------------------- -- --------
也就是说，这个装饰器直接就运行了。这个也就是说，如果你有10个 Decorators，每个 Decorator 会造成一个难看的 MyClass = someDecorator(MyClass) || MyClass;，而且每个 Decorator 还是在过程中直接运行的。
装饰器无法正确编译
在 Babel 7 中，@babel/plugin-transform-decorators 已经被舍弃了，我们需要使用新的插件 @babel/plugin-proposal-decorators
在 Babel7 中使用装饰器可能会出现无法正确编译的问题。
比如以下代码：
----- ------- - ------------ ---------- -- -
在 Babel 7 中，myDecorator 无法正确编译，因为在 ES2016 的规范中，decorators 需要具有以下特征：
- 是换行符平面中标记，属性描述符、返回类型、对属性访问器的装饰器应该附加在各自的目标上；
- 是带有一个参数的函数，当它们被调用时被实例化，它们的实例的属性被分配到目标（类声明、类元素或方法）上；
- 其实例具有 at least one of以下方法：
before?: (value?: any) => anyafter?: (value?: any) => anyirrelevant?: (value?: any) => any
改用新版的 transform-decorators 插件
因为旧版的 transform-decorators-legacy 在面对复杂的、大规模的代码时会比较慢，所以 Babel 7 中推荐使用新版的 transform-decorators 插件。
transform-decorators-proposal 是一个能够处理 ES Class Decorator/Methods/Pramater 以及 TypeScript 的 Babel 插件。
安装：
--- ------- ---------- ---------------------------------
使用：
在.babelrc 中的 plugins 数组中，添加如下语句：
-------- - ------------------------------------- - ------- ---- --- --- -
实例
默认装饰器模式
在默认装饰器模式下，我们可以通过让装饰器返回一个新的对象来代替原来的对象原型。
-------- ------- -
------------------------ ----
------ -------- --------- ----------- -- -
----------------------- ----
-
-
----- ------- -
-------
-------
----------
-
-- --------- -
-- --------- -
-- -------- -
-- -------- -不是基于类的装饰器
为了修复这个问题，我们可以手动修改 Babel 配置，这至少能让你维持基于函数的装饰器。
-------- -------------- ---- ----------- -
---------------- ---- ---- -----------
-
------ ----- ------- -
----
----------------- -
--------------------- ---------- ---- ------- -------
-
-你可以在 .babelrc 配置文件中添加如下配置，覆盖默认配置。
-
---------- -
------------------------------------- - --------- ---- ---
------------------------------------------- - ------- - ---- --
--
---------- -
---------------------------
-
--------------------
-
---------- -
--------- ----
-
-
-
-
-常规类装饰器
-- --------------- ----
-------------
-------- ---------- -
------ ------ -- ---------------------- ----- ------------
-
----- --- --------- - ----- --------- -
------------- -
------ - --
-
--- --
--
--------- - --------------------- -- ----------
---------------------------------
-- --- ------------- ---- -- --类装饰器
-------- --------------------- -
-------------- - -----
------ ------
-
---------------
----- --------- -
--------------
-------------- - -----
-
-
-------------------------------- -- ----
--------------- ----------------------- -- ----总结
拥有装饰函数真是一件方便的事情。它为开发者提供了更加优雅的解决方案。同时向我们传达了一种更加优美的代码方式。
使用 eslint 检查器来帮助你检查所有使用了装饰器的代码，确保你的代码在使用装饰器的时候正确无误。同时，使用 babel-plugin-macros 来生成依赖管理器库可确保您的代码在容错性方面更加健壮。
以上就是 Babel7 升级后出现装饰器转译问题的解决方法和示例，希望能够帮助大家。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65b88625add4f0e0ff115e4e