前言
在前端开发中，经常需要进行对象序列化和反序列化操作，而 Protocol Buffers 是 Google 提供的一种高效的传输数据格式，支持多种编程语言，并且有很好的兼容性。
@protobufjs/codegen 是一款 npm 包，它提供了一种简单可扩展的打包和代码生成机制，通过使用该包，我们可以方便地在前端项目中使用 Protocol Buffers。
在本篇文章中，我将为你提供一份详细的教程，同时也会提供一些示例代码和经验，帮助你更轻松地使用 @protobufjs/codegen。
安装
安装 @protobufjs/codegen 非常简单，只需要在终端中运行以下命令：
npm install @protobufjs/codegen
使用
@protobufjs/codegen 提供了两种打包和代码生成机制，分别是 pbjs 和 pbts。
pbjs
pbjs 是一种命令行工具，用于将 .proto 文件打包成 JavaScript 代码。
可以先创建一个名为 test.proto 的.proto 文件，并添加以下内容：
syntax = "proto3";
package tutorial;
message Person {
string name = 1;
int32 age = 2;
}然后，我们可以在终端中运行以下命令进行打包：
pbjs -t static-module -w commonjs -o test.js -p ./ test.proto
解释一下上面的参数：
-t static-module：生成 ES6 模块，可在 Node.js 或浏览器中使用-w commonjs：生成 CommonJS 模块，便于在 Node.js 中使用-o test.js：指定生成的文件名-p ./：指定 .proto 文件所在的目录
打包成功后，文件 test.js 中将生成以下内容：
"use strict";
/* eslint-disable */
/* Protobuf.js 6.10.2 */
...
exports.Person = $util.addProtoNameToObject({}, "tutorial.Person");pbts
pbts 是 pbjs 的 TypeScript 版本，用于将 .proto 文件生成 TypeScript 类型定义文件。
可以使用以下命令生成类型定义文件：
pbts -o test.d.ts test.js
解释一下上面的参数：
-o test.d.ts：生成的类型定义文件名test.js：之前生成的 JavaScript 文件名
生成的类型定义文件内容如下：
import * as $protobuf from "protobufjs";
export class Person extends $protobuf.rpc.Service {
constructor(rpcImpl: $protobuf.RPCImpl, requestDelimited?: boolean, responseDelimited?: boolean);
name: string;
age: number;
}示例代码
有了上面的内容，我们已经可以使用 Protocol Buffers 了，下面是一个简单的例子：
import * as protobuf from 'protobufjs';
import { Person } from './test';
const buffer = protobuf.util.newBuffer(16);
const person = Person.decode(buffer);
console.log(person);结语
在这篇文章中，我向大家介绍了如何使用 @protobufjs/codegen 打包和代码生成机制，包括使用 pbjs 将 .proto 文件打包成 JavaScript 代码，使用 pbts 将 .proto 文件生成 TypeScript 类型定义文件等。
使用 @protobufjs/codegen 能够帮助我们更轻松地在前端项目中使用 Protocol Buffers，提高数据传输的效率，同时也可以有效减少代码文件大小。我希望这篇文章能为你带来一些帮助和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/protobufjs-codegen