当creator遇上protobufjs|pbkiller填坑历险记

1. pbkiller报错啦！

---

在公众号上「花无思」同学反应pbkiller在Cocos Creator 2.x测试场景构test-pbkiller建后加载proto文件时会有报错啦！

这里首先向「花无思」道个歉，pbkiller的不完善给你带来的困扰，其次是没能即时回复您在公众号上的留言。

冒着冷汗看看报错提示吧：

经过一番艰苦战斗，终于确定test-pbkiller测试场景在构建模式下有机率出现上述问题。

目前Shawn已找到问题原因和解决办法，同时提交了一个版本到Cocos商店，不过目前暂时还没有审核通过。

如果您正好遇到这个问题，又不想去Cocos商店下载新版本，参考下面对问题的分析和解决办法，相信你还会获得更多的收获！

2. 分析

---

从错误提示上看，是protobuf.js内部在解析ChatMsg中的playerInfo时出错，我们看一下，ChatMsg的定义：

ChatMsg.proto文件中导入了Player.proto文件，再看Player.proto文件内容：

proto文件定义都是正常的，为什么会报错呢？回想在设计pbkiller时了兼容protobufjs的多种使用方法（加载proto、json、js），pbkiller也提供了json格式的协议加载，因此之前Shawn当时为了图省事随手将Player.proto转换成了Player.json用于json格式的加载测试，看下面代码：

let pb = pbkiller.loadFromFile('Player.json', 'grace.proto.msg');

Shawn在好几次构建测试，并没出现问题，十分纳闷，这是为什么呢？

但从上面的报错来看，敢肯定是与ChatMsg.proto、Player.proto、Player.json有关，而且与Player.json嫌疑最大。

3. 历险

---

首先整理一下线索，有了一丝线索有就了行动的方向：

1. 预览环境正常，在构建环境下有问题

2. 存在同名的Player.proto与Player.json

只要问题能重现就好办，可是Shawn在在反复多次尝试中，都无法重现问题！

于是将所有资源全部清除，重新导入pbkiller的资源，重新生成文件的uuid终于在自己的电脑上也模拟出与「花无思」一样的报错提示：

Uncaught Error: unresolvable type reference in Message.Field .grace.proto.msg.ChatMsg.playerInfo: Player	
    at n.s.resolveAll (project.b7f47.js:1)	
    at n.<anonymous> (project.b7f47.js:1)	
    at Array.forEach (<anonymous>)	
    at n.s.resolveAll (project.b7f47.js:1)	
    at n.<anonymous> (project.b7f47.js:1)	
    at Array.forEach (<anonymous>)	
    at n.s.resolveAll (project.b7f47.js:1)	
    at n.<anonymous> (project.b7f47.js:1)	
    at Array.forEach (<anonymous>)	
    at n.s.resolveAll (project.b7f47.js:1)

根据报错提示分析怀疑是加载ChatMsg时内部依赖Player.proto，加载成了Player.json（按理是加载Player.proto）导致的协议数据不完整，顺着这个思路，看看文件的加载顺序：

我们分析一下文件名、UUID、加载顺序：

Player.json:     UUID 为 e271c45b-3873-4f26-bade-3ded28980b75

Player.proto:  UUID 为 52f10b58-b449-4821-bf3a-5c846a9a7a78

在Dev Tools的Network页面，可以看到资源的加载顺序，先加载的Player.json，后加载的Player.proto，同时可以看到控制台下有报错了。

在这次构建时我设置了md5Cache选项，在之前将md5Cache关闭是没有报错的！

我们看再一下未设置md5Cache时Network中的加载顺序：

这次代码没有报错，从Network中可以看到加载顺序变成了，先加载的Player.proto后加载的Player.json，至此找到了问题出现在的原因：

1. protobufjs在解析ChatMsg.proto时，ChatMsg.proto内嵌套了Player.proto

2. 在加载嵌套的Player.proto时，由于Cocos Creator将文件名全部转换成了uuid，同名文件的加载顺序每次构建会不同。

3. 同名文件名的加载顺序受到uuid及md5Cache的影响

终于找到问题，于是将Player.json改成Player2.json，杜绝同名文件，经过多次测试问题不再出现。

小结

---

这次查找pbkiller中测试用例的隐藏BUG很是费劲，自己埋的坑自己填。

从入坑到填坑的过程中，能感受到自己的一交次的进步，对Cocos Creator又有了更多解了一些，收获还是不小，简单小结下面几点：

1. 预览环境与构建环境是有差异的，测试很重要

2. md5Cache会影响到构建后的同名文件以及加载顺序

3. 特别注意同名的配置文件，比如player.plist、player.json、player.proto使用cc.loader.loadxxx时一定要指定文件类型。

---

如果觉得众号上的文章对您或您身边的朋友有帮助，感谢分享给他们，愿我们一起成长！