Error: Missing class properties transform

在使用 ES6 的类语法编写前端代码时,有时会遇到 Error: Missing class properties transform 的错误,这是因为在类中使用了实验性的 class fields 语法,而该语法需要通过 babel 转义才能在当前浏览器环境下使用。

什么是 class fields 语法?

class fields 是 ES6 中一个实验性的语法特性,它可以让我们在类内声明实例属性,而不必在类的构造函数中显式地给 this 添加属性。例如:

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

使用上述语法,我们就可以在实例化 Person 类时,直接获取 name 属性的值,而不必在构造函数中显式地赋值。当然,这个特性目前还在实验阶段,并不是所有的浏览器都支持。

如何解决 Error: Missing class properties transform 错误?

由于 class fields 语法并不是所有浏览器都支持,因此我们需要使用 babel 将其转义成标准的 ES5 语法。具体操作如下:

  1. 安装相关依赖
--- ------- -- ----------- ---------- -----------------
  1. 在项目根目录下创建 .babelrc 文件,并配置 @babel/preset-env 预设
-
  ---------- -
    -
      --------------------
      -
        ---------- -- ------ --- -----
      -
    -
  -
-

其中,"> 0.25%, not dead" 表示我们要支持全球使用率超过 0.25% 的浏览器,但不包括已经停止更新的浏览器。

  1. 在项目中使用 babel 转义 class fields 语法

通过在项目中使用 @babel/cli 命令行工具,可以将项目中所有的 ES6 语法转义成 ES5 语法。具体操作如下:

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

其中,src 是源代码目录,dist 是转义后的代码目录。

示例代码

以下是一个简单的示例代码,演示了如何使用 class fields 语法,并通过 babel 转义后在浏览器中运行。

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

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

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

总结

使用 class fields 语法可以使我们的代码更加简洁易懂,但需要注意它并不是所有浏览器都支持。当出现 Error: Missing class properties transform 错误时,可以通过使用 babel 将其转义成标准的 ES5 语法来解决。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/31222