【1.8.2正式版】es6 class 静态属性 编译问题

先总结吧:es6语法实现的一个类,内部只有静态属性,没有任何方法,编译后无法使用

我们写了一个ip端口的配置类。

升级了1.8.2以后,编译运行,结果在安卓上就跑不起来了。确切的说是运行起来后,因为在进入第一个场景前就报错,所以变成了黑屏。看了logcat里的报错,提示project.js某一行访问了undefined对象的某个字段。

然后看了project.js后,发现是require上图的connectconfig模块后,使用其中一个字段导致的错误。为了方便调试,就改成web mobile构建,在浏览器中调试运行,发现是require(‘ConnectConfig’)的结果除了原型只有一个__esModule字段。

猜想是不是class的静态属性有问题(以前做前端babel还不支持静态属性,所以想到了这个),就将ConnectConfig改成了es5 module.exports的形式,结果。。。运行成功,模块导出正确,错误没有了。

本来打算就这样提交吧,毕竟问题已经解决了。但可能今天下午是有点闲?然后又下载了1.8.0,1.8.1的版本(因为之前是从1.8.0直升的1.8.2),都编译看了project.js中相关的片段。这才确定编译的代码确实有问题。但是之前怀疑的静态属性问题又站不住脚,因为项目中还有其他类似的模块。但别的模块缺没有出现这个问题。

于是对比了project.js中的编译结果。其他类似的模块的静态属性,编译后像是通过先创建一个function闭包,然后再给该闭包直接设置属性实现的,方法变成key function的形式。看到这儿才恍然大悟,ConnectConfig只有静态属性,一个方法都没有。。。于是给ConnectConfig加了一个方法后,问题解决了

如下图:

修改前后的编译结果对比:1,修改前,2,修改后

希望有大佬能解惑

2赞

@jare jare大神

抱歉,这我还真没注意过。猜想应该是 babel 对 class 的实现有问题。不过老实说我没看懂编译后区别在哪……

1.8.1编译后能够正常使用,1.8.2会有问题

问一个比较无聊的问题:改成es5 module.exports的形式可以实现了,改成es6语法实现的一个类。有什么优势,好处?

对于这样一个简单模块来说没有,只是项目统一模块定义形式的考虑

好看。。。

能不能提供一个 demo?

将官方的polished_project_es6改了点,加了个Constants.js。代码如下,编译平台选择web_mobile或者android都可以重现。不能勾选调试模式

// 注释掉getXxxx方法时,Player:29行的打印结果为undefined, // 去掉getXxxx的注释后,Player:29行成功打印出hallService字段 export default class Constants { static roomServer = { ip: '192.168.0.9' } static hallServer = { ip: '192.168.0.10' } // 去掉该方法的注释,即可编译成功 // getXxxx() { // return '' // } }

polished_project_es6.zip (470.3 KB)

我下载了官方的 1.8.2,未能重现这个问题。难道是只有 Windows 才会这样吗?

我也是macos

跟楼主出现了一样的问题。 ES6 Class 静态属性的语法。在windows下勾选调试模式没问题,不勾选就会出现静态属性undefined的情况。@Jare