Protobuf之proto js生成_protoc js-CSDN博客

本文链接：https://blog.csdn.net/u010138825/article/details/85245995

先上我的工作区图，最终的样子

在这里插入图片描述

你新建一个文件夹，在文件夹中打开VSCODE，快捷键Ctrl+Shift+Y,然后在TERMINAL中执行各种命令。

先说下，我已经安装了Node.js

在这里插入图片描述

Before把要用的先记录一遍[IM.MD文件]

npm install -g require(对库文件的引用库)
npm install -g browserify(这个是用来打包成前端使用的js文件)
npm install google-protobuf(protobuf的库文件)
https://github.com/protocolbuffers/protobuf（github地址）
https://github.com/protocolbuffers/protobuf/releases/download/v3.6.1/protoc-3.6.1-win32.zip
(proto.exe工具，加入path环境变量或者放入system32下)
protoc.exe --js_out=import_style=commonjs,binary:. ZH_IM.proto
(编译proto为js文件，注：syntax在文件中规定第一行)
browserify ZH_IM.js > IMBody.js
(打包成品js)

ZH_IM.proto【文件】

syntax = "proto3";
package zhimpackage;
message ZH_IMMessage {
    string field = 1; // becomes awesomeField
}

ZH_IM.js【文件】

var ZH_IMBody  = require("./ZH_IM_pb");
module.exports = {  
    DataProto: ZH_IMBody  
}

准备好了就要开始输入命令行了

所有命令在TERMINAL选项卡执行
npm install -g require
npm install -g browserify
npm install google-protobuf
Ok，接下来将下载IM.MD给好连接下载(proto.exe工具，加入path环境变量或者放入system32下)
protoc.exe --js_out=import_style=commonjs,binary:. ZH_IM.proto
Ok，生成了ZH_IM_pb.js
browserify ZH_IM.js > IMBody.js
Ok，IMBody.js新鲜出炉了【最终生成protobuf js文件】
开始用一下

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>竹</title>
    <script src="IMBody.js"></script>
</head>  
<body>  
</body>  
<script>  
    var message = new proto.zhimpackage.ZH_IMMessage();
    message.setField("一个人");
    var bytes = message.serializeBinary();
    console.log(bytes);
    var data = proto.zhimpackage.ZH_IMMessage.deserializeBinary(bytes);
    console.log(data);
    console.log(data.getField());
</script>  
</html>

看图

在这里插入图片描述

我不得不提几个注意的点

protoc.exe这个上文给了连接，需要下载并环境配置【本人将protoc.exe直接扔System32文件夹下了】ps:本人还双击了这个文件，咳咳，以为像jdk一样要安装再去配置
syntax = “proto3”;在*.proto文件中需第一行【proto.exe工具解析规则如此】
proto生成文件末尾为proto文件名+_pb【proto.exe工具生成规则如此，OR其它方式】
页面的Set和Get属性操作，如果你用过lombok工具，我想你能明白。
说一千道一万，来一遍吧。