Babel7 升级后出现的 Decorator 转译问题及解决方法-JavaScript中文网-JavaScript教程资源分享门户

前言

通过装饰器语法，我们可以很方便地向一个类或一个函数添加一些元数据，或者改变其行为。在 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 装饰器语法。这个插件将一个完整的流程重新实现，来让这个语法正常地工作。

不过问题是这个插件在应对大规模的、复杂的装饰器语法时，每一个实现方法都会变费时间。解析持数型的参数显然不短，而且还有很多问题。

比如以下代码：

@someDecorator
class MyClass {}

如果你用了 babel-plugin-transform-decorators-legacy 后 JS 最终被转译为：

let MyClass = function MyClass() {};
MyClass = someDecorator(MyClass) || MyClass;

也就是说，这个装饰器直接就运行了。这个也就是说，如果你有10个 Decorators，每个 Decorator 会造成一个难看的 MyClass = someDecorator(MyClass) || MyClass;，而且每个 Decorator 还是在过程中直接运行的。

装饰器无法正确编译

在 Babel 7 中，@babel/plugin-transform-decorators 已经被舍弃了，我们需要使用新的插件 @babel/plugin-proposal-decorators

在 Babel7 中使用装饰器可能会出现无法正确编译的问题。

比如以下代码：

class MyClass {
  @myDecorator
  myMethod() {}
}

在 Babel 7 中，myDecorator 无法正确编译，因为在 ES2016 的规范中，decorators 需要具有以下特征：

是换行符平面中标记，属性描述符、返回类型、对属性访问器的装饰器应该附加在各自的目标上；
是带有一个参数的函数，当它们被调用时被实例化，它们的实例的属性被分配到目标（类声明、类元素或方法）上；
其实例具有 at least one of以下方法：

before?: (value?: any) => any
after?: (value?: any) => any
irrelevant?: (value?: any) => any

改用新版的 transform-decorators 插件

因为旧版的 transform-decorators-legacy 在面对复杂的、大规模的代码时会比较慢，所以 Babel 7 中推荐使用新版的 transform-decorators 插件。

transform-decorators-proposal 是一个能够处理 ES Class Decorator/Methods/Pramater 以及 TypeScript 的 Babel 插件。

安装：

npm install --save-dev @babel/plugin-proposal-decorators

使用：

在.babelrc 中的 plugins 数组中，添加如下语句：

plugins: [
  ['@babel/plugin-proposal-decorators', { legacy: true }],
  ...
]

实例

默认装饰器模式

在默认装饰器模式下，我们可以通过让装饰器返回一个新的对象来代替原来的对象原型。

-- -------------------- ---- -------
-------- ------- -
  ------------------------ ----
  ------ -------- --------- ----------- -- -
    ----------------------- ----
  -
-

----- ------- -
  -------
  -------
  ----------
-

-- --------- -
-- --------- -
-- -------- -
-- -------- -

不是基于类的装饰器

为了修复这个问题，我们可以手动修改 Babel 配置，这至少能让你维持基于函数的装饰器。

-- -------------------- ---- -------
-------- -------------- ---- ----------- -
  ---------------- ---- ---- -----------
-

------ ----- ------- -
  ----
  ----------------- -
    --------------------- ---------- ---- ------- -------
  -
-

你可以在 .babelrc 配置文件中添加如下配置，覆盖默认配置。

-- -------------------- ---- -------
-
    ---------- -
        ------------------------------------- - --------- ---- ---
        ------------------------------------------- - ------- - ---- --
    --
    ---------- -
        ---------------------------
        -
          --------------------
          -
            ---------- -
              --------- ----
            -
          -
        -
    -
-

常规类装饰器

-- -------------------- ---- -------
-- --------------- ----
-------------
-------- ---------- -
  ------ ------ -- ---------------------- ----- ------------
-

----- --- --------- - ----- --------- -
  ------------- -
    ------ - --
  -

  --- --
--

--------- - --------------------- -- ----------
---------------------------------
-- --- ------------- ---- -- --

类装饰器

-- -------------------- ---- -------
-------- --------------------- -
  -------------- - -----
  ------ ------
-

---------------
----- --------- -
  --------------
    -------------- - -----
  -
-

-------------------------------- -- ----
--------------- ----------------------- -- ----

总结

拥有装饰函数真是一件方便的事情。它为开发者提供了更加优雅的解决方案。同时向我们传达了一种更加优美的代码方式。

使用 eslint 检查器来帮助你检查所有使用了装饰器的代码，确保你的代码在使用装饰器的时候正确无误。同时，使用 babel-plugin-macros 来生成依赖管理器库可确保您的代码在容错性方面更加健壮。

以上就是 Babel7 升级后出现装饰器转译问题的解决方法和示例，希望能够帮助大家。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/65b88625add4f0e0ff115e4e