浏览器环境下使用protobuf.js CommonJS规范遇问题求助

• 别用源码文件，选浏览器专用打包版
  你之前直接引入的src/index.js是给Node.js设计的，依赖CommonJS的module和require语法，浏览器根本不认识这些变量，自然会报错。正确的做法是用protobuf.js官方打包好的浏览器版本——去项目的dist目录里找protobuf.js或者压缩后的protobuf.min.js，把它们放到你的项目静态资源文件夹里，然后用普通<script>标签引入：

  <script src="./js/protobuf-js/dist/protobuf.min.js"></script>
  

  这样引入后，全局就会自动注册protobuf对象，不会再出现「protobuf is not defined」的错误。

• 废弃的CDN别用
  你之前用的rawgit链接已经停止服务了，不管加不加type属性都加载不出来，直接放弃这种方式就行。

• 快速上手示例
  假设你有一个user.proto文件：

  syntax = "proto3";
  package demo;
  message User {
    int32 id = 1;
    string name = 2;
  }
  

  可以直接在浏览器里动态加载并使用：

  // 加载proto文件
  protobuf.load("./user.proto", function(err, root) {
    if (err) throw err;
    // 获取消息类型
    const User = root.lookupType("demo.User");
    // 构造并验证数据
    const userData = { id: 1001, name: "Kris" };
    const verifyErr = User.verify(userData);
    if (verifyErr) throw new Error(verifyErr);
    // 编码成二进制数据，发给Java服务器
    const buffer = User.encode(User.create(userData)).finish();
    // 用fetch发送请求
    fetch("/api/user", {
      method: "POST",
      body: buffer,
      headers: {
        "Content-Type": "application/protobuf"
      }
    });
    // 解码示例（处理服务器返回的二进制）
    const decodedUser = User.decode(buffer);
    console.log(decodedUser);
  });
  

  如果想优化性能，也可以提前用protobuf.js的命令行工具把proto编译成浏览器可用的JS文件：

  # 全局安装protobufjs
  npm install -g protobufjs
  # 把proto编译成UMD格式的JS文件
  pbjs -t static-module -w umd -o user.umd.js user.proto
  

  之后直接引入user.umd.js就能直接用生成的类型，不用动态加载proto文件。

内容的提问来源于stack exchange，提问作者Kris Rice