Node.js模块浏览器运行报错：buffer未定义及writeUInt8异常

问题分析 #

你遇到的两个错误根源在于浏览器环境没有原生支持Node.js的Buffer API，而jsgo内部依赖了这个API：

• 第一个错误Uncaught ReferenceError: buffer is not defined：jsgo尝试访问全局的Buffer但浏览器中不存在
• 第二个错误Uncaught TypeError: buffer.writeUInt8 is not a function：你直接引入了buffer模块对象，但没有获取到正确的Buffer构造函数

解决方案 #

1. 正确使用browserify打包并引入Buffer #

browserify会将Node.js的buffer模块打包为浏览器兼容版本，但你需要正确获取Buffer构造函数：

• 创建单独的脚本文件（比如demo-parser.js），内容如下：

  const { Buffer } = require('buffer');
  const jsgo = require('./jsgo-src'); // 根据实际路径调整
  
  $(function() {
      $('#demo').show().change(function(e) {
          if (e.target.files.length > 0) {
              var reader = new FileReader();
              reader.onload = function() {
                  var previousRound = 0;
                  var myDemo = new jsgo.Demo()
                      .on('game.round_end', function(event) {
                          console.log('ROUND ' + (previousRound + 1));
                          previousRound = 0;
                          var teams = this.getTeams();
                          for (var i = 0; i < teams.length; i++) {
                              var team = teams[i];
                              var side = team.getSide();
                              if (side == 'TERRORIST' || side == 'CT') {
                                  console.log(team.getSide() + ' (' + teams[i].getClanName() + '): ' + team.getScore());
                                  previousRound += team.getScore();
                              }
                          }
                          console.log('--------');
                      })
                      .parse(new Uint8Array(reader.result));
              }
              reader.readAsArrayBuffer(e.target.files[0]);
          }
      });
  });
  

• 运行browserify打包命令：

  browserify demo-parser.js -o bundle.js
  

• 在HTML中引入打包后的bundle.js及jQuery：

  <input type="file" id="demo" name="demo" style="display: none" />
  <br />
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="bundle.js"></script>
  

2. 尝试使用jsgo预编译的浏览器版本 #

检查jsgo的仓库，是否提供了已包含Buffer兼容层的浏览器专用版本（如jsgo-browser.js）。如果有，直接引入该文件即可，无需自行用browserify打包。

3. 确保全局Buffer可用 #

如果jsgo期望全局存在Buffer对象，可在打包后的代码中手动挂载：

window.Buffer = require('buffer').Buffer;

总结 #

你不需要修改jsgo的源码，问题出在buffer模块的引入方式和browserify的使用流程上。按照上述步骤调整后，jsgo就能在浏览器中正常解析CS演示文件了。

内容的提问来源于stack exchange，提问作者Magnus V.