解决3.x中protobuf使用报错和代码提示

1.解决"为起点找不到模块"

我这使用protobuf中生成的pb.js和pb.d.ts文件,目录结构为pb/js/pb.js, pb/js/pb.d.ts, 命名空间为pb。

在vscode输入pb后,代码提示自动import引入

import { pb } from './pb/js/pb';

但在代码中导入后运行报错:为起点找不到模块 "./pb/js/pb"

经过一番折腾和资料查阅,然后发现这里

然后修改导入代码,改成

import { pb } from './pb/js/pb.js'; //其实就是末尾加上.js后缀

此时,起点找不到模块 报错消失了。但是,pb的值为undefined

2.解决导入对象undefined

虽然 为起点找不到模块 这个报错消失了,但貌似还是报错,而且看着报错应该是pb为空了,然后console.log(pb)看一下,果然为undefined, 然后又经过一番折腾,无果,然后随便试试不通过花括号导出,看看是啥

//这次没有通过 {pb}来导出,而是直接pb导出,vscode报错,但实际上pb有值
import pb from './pb/js/pb.js';

//...省略若干代码
start(){
  console.log(pb)
}
//...省略若干代码

这样pb居然不是undefine,看到log一个对象 {pb: xxx},这就很神奇了,import pb from xxx,这个pb的值为{pb:xxx},却不能通过import {pb} from xxx来把对象里的pb解构出来。虽然现在解决了undefined,但用起来很别扭,因为pb的类型为any

3.另辟蹊径,搞到代码提示

pbjsd.ts代码我都是放在pb/js里,现在要新建一个pbutils.tspb/pbutils.ts

pbutils.ts代码如下

import { pb } from "./js/pb.js" //这里的pb为undefined,但不重要,我要的是代码提示
import p from "./js/pb.js" //这里的p,在vscode里报错,但实际上有值,而且我们真正需要的逻辑在吗在p.pb里
(pb as any) = p.pb
export default pb;

这样,使用pbutils.ts里的pb可以使用代码逻辑,又能有代码提示

4.最终代码

pb/pbutils.ts

//pbutils.ts
import p, { pb } from "./js/pb.js";
(pb as any) = p.pb
export default pb;

调用脚本.ts

//调用脚本.ts
import pb from './pb/pbutils';

//...省略若干代码
start(){
  console.log(pb)
}
//...省略若干代码
1赞

嫌麻烦可以用我的插件,安装和生成都是一键搞定,
也支持bundle热更

https://forum.cocos.org/t/topic/152212

1赞