在使用 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 语法。具体操作如下:
- 安装相关依赖
--- ------- -- ----------- ---------- -----------------
- 在项目根目录下创建
.babelrc
文件,并配置@babel/preset-env
预设
- ---------- - - -------------------- - ---------- -- ------ --- ----- - - - -
其中,"> 0.25%, not dead"
表示我们要支持全球使用率超过 0.25% 的浏览器,但不包括已经停止更新的浏览器。
- 在项目中使用 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