Cocos Creator 3.8.0 使用 protobufjs

关于如何在Cocos Creator 各个版本中使用protobufs这一问题,我和大家一样几乎搜遍了互联网所有相关的帖子,到最后我还是没有解决,总是会报出各种问题,我不得不怀疑,那些帖子都没有深入到本质问题上面去,而只是碰巧解决了。

我的项目是3.8.0,经过一番摸索,最终还是在cocos creator的官方文档中找到了答案,此刻我就化身cocos creator讲师,给大家讲一下我是如何解决的:

1.假设大家已经有3.8.0项目了(Typescript)。
2.为了去除一些可变因素,先在项目目录下执行命令:
npm remove -g protobufjs // 移除全局安装的protobufjs
npm remove -g protobufjs-cli // 移除全局安装的protobufjs-cli
npm remove -g pbjs // 这个pbjs是可以单独安装的,我也不知道为什么。
npm remove --save protobufjs // 移除项目中的
npm remove --save protobufjs-cli // 移除项目中的
npm remove --save pbjs // 移除项目中的

到此,关于protobufjs的可变因素应该已经完全去除了,再让我们从0开始吧,仍然是在项目目录下执行命令:
npm install --save protobufjs // 安装到项目中,这会安装最新的protobufjs
npm install --save protobufjs-cli // 安装到项目中,这会安装最新的protobufjs-cli

这样,protobufjs相关的库就安装好了。

我们接着在项目目录中新建一个 proto3 格式的proto文件cmd.proto,内容如下:

syntax = “proto3”;

package eproto;

enum CommonCmd {
Unkown = 0;

C2S_Heartbeat = 1;
S2C_Heartbeat = 2;

}

然后将proto文件生成 proto.js 以及 描述文件 proto.d.ts:
./node_modules/protobufjs-cli/bin/pbjs -t static-module -w commonjs cmd.proto -o assets/proto.js
./node_modules/protobufjs-cli/bin/pbts assets/proto.js -o assets/proto.d.ts

顺利的话,你会看见assets/目录下面应该已经生成好了这两个文件(proto.js和proto.d.ts),接下来,很多帖子会告诉你去修改生成出来的文件,去把protobufjs导入为插件等等之类的,其实不用。

我们现在可以直接使用了!具体做法是:
1.在你需要引入proto的class文件中,像这样引入:

import { default as root } from “…/…/proto.js”;// 此处你要修改成正确的相对路径,但是请记得一定要是proto.js结尾.

const { eproto } = root;

好了,你可以在代码中访问eproto中的数据了,console.log(“eproto => %o”, eproto);

不出意外的话,这个输出就是你想要的答案了吧。

这个问题的本质,应该就是从 esm 模块(cocos creator 的 ts 文件默认模块类型) 导入 commonjs(pbjs生成的js文件) 模块,proto的具体内容是被封装在 commonjs导出的default中,需要层层挖掘出来才是你所需要的那个命名空间或者具体的对象。

关于此问题,我也无法再探讨更深了,或许我的解决方案能恰好帮助到你。

7赞

这样子,浏览器是可以的,有没有试过其它平台呢

其他平台也没问题

"allowSyntheticDefaultImports": true,

import { default as root } from “…/…/proto.js”;/ 这个就可以改成 import root from “…/…/proto.js”;/

那为啥不直接生成es6?./node_modules/protobufjs-cli/bin/pbjs -t static-module -w es6 cmd.proto -o assets/proto.js

我试过es6,报错。最后还得es5解决

确实是如此,只需要在 import 的时候带上 .js 就行了。 我再整理一下文档,网络这块的教程我抽空完善一下。

就三个步骤 cocos 最简单的protobufjs 接入(3.8已测试)_npx pbts-CSDN博客

2赞

这篇写得比官方文档条理清晰,回头我就抄一个。

1赞

mark,简单直接