如何在浏览器端JavaScript环境中正确使用Flatbuffers

浏览器端使用FlatBuffers正确流程 #

你遇到的Website对象不存在问题，核心原因是默认生成的TypeScript/JavaScript代码均为模块化导出格式，没有主动挂载到浏览器的window全局对象，直接通过script标签引入后自然无法通过全局变量访问。完整可运行的操作流程如下：

1. 前置依赖安装 #

提前安装所需工具：

• FlatBuffers官方编译器flatc
• 全局TypeScript：npm install -g typescript
• 全局打包工具及TS插件：npm install -g browserify tsify
• 项目内安装FlatBuffers运行时：npm install flatbuffers

2. 编写FlatBuffers定义文件 #

和你现有操作一致，编写website.fbs文件，建议明确声明命名空间方便后续导出：

// 示例结构，可根据你的业务调整
namespace Website;
table Article {
  id: int;
  title: string;
  content: string;
}
root_type Article;

3. 生成TypeScript代码 #

运行flatc命令生成TS代码，可额外加--gen-name-strings参数方便调试：
flatc --ts --gen-name-strings website.fbs
执行完成后会得到website.ts文件。

4. 配置TypeScript编译规则（核心修正点） #

在同级目录新建tsconfig.json文件，配置如下保证编译产物适配打包工具：

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["*.ts"]
}

5. 全局挂载+打包（核心修正点） #

新建打包入口文件index.ts，将FlatBuffers导出的模块手动挂载到浏览器全局对象：

import * as Website from './website';
// 声明全局类型，避免TS报错
declare global {
  interface Window {
    Website: typeof Website;
  }
}
window.Website = Website;

执行打包命令一步完成TS编译和JS打包：
browserify index.ts -p tsify -o website.browser.js

6. 浏览器端调用 #

直接通过script标签引入打包后的文件即可：
<script src="website.browser.js"></script>
引入完成后就可以正常调用Website下的所有序列化、反序列化方法，执行console.log(Website)也会正常输出对象。

如果使用其他打包工具（如esbuild、vite），只需要遵循同一个核心逻辑即可：将生成的FlatBuffers TS代码的导出内容，手动挂载到window全局对象上，不需要调整FlatBuffers本身的生成规则。

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