安装protobufjs

$ npm install protobufjs -g

编写一个需要交互的proto文件

  • awesome.proto
// awesome.proto
syntax = "proto3";

message AwesomeMessage {
string name = 1;
}

编译一个静态的js文件

  • 编译静态js文件
  • 编译ts版本
$ pbjs -t static-module -w commonjs -o awesome.js awesome.proto
$ pbts -o awesome.d.ts awesome.js

awesome.js的引用需要修改

var $protobuf = window.protobuf || {};

导入一个protobuf.js的最小版本

  • 引入一个插件

protobuf.min.js

加入两个编译成的文件

简单测试

import { AwesomeMessage } from "./proto/awesome";
...
let asm = AwesomeMessage.fromObject({
name: '你好Proto',
});

const buf = AwesomeMessage.encode(asm).finish();
console.log(buf);

let message = AwesomeMessage.decode(buf);
let object = AwesomeMessage.toObject(message, {
longs: String,
enums: String,
bytes: String,
// see ConversionOptions
});
console.log(object);