在 MNN 仓库中使用 FlatBuffers JavaScript 库读取、构建与测试完整指南【免费下载链接】MNNMNN: A blazing-fast, lightweight inference engine battle-tested by Alibaba, powering high-performance on-device LLMs and Edge AI.项目地址: https://gitcode.com/GitHub_Trending/mn/MNN导读本指南以 MNN 仓库内3rd_party/flatbuffers自带文档 JavaScriptUsage.md 为主体系统讲解如何在 JavaScriptNode.js 与浏览器环境中使用 FlatBuffers从flatc --js生成代码、用ByteBuffer读取二进制、到从零构建 FlatBuffer 并落地为测试用例。读完本文你将掌握一套可直接复用的 FlatBuffers JS 读写工作流并能基于仓库中的 JavaScriptTest.js 验证自己的实现。MNN 的模型与算子定义本身即采用 FlatBuffers schema见 schema/current 下生成的.h文件理解 JS 侧的使用方式也有助于理解 MNN 数据格式的整体设计。前置准备先掌握 FlatBuffers 的基础流程在深入 JavaScript 特有的用法之前建议先按顺序阅读仓库内的三份基础文档Tutorial面向所有支持语言的完整入门教程JavaScript 也在其中是理解本页内容的大前提Building讲解如何编译出flatc编译器CompilerUsing the schema compiler与 SchemasWriting a schema分别说明 schema 编译器的用法与 schema 语法。本页不再重复这些通用内容而是聚焦 JavaScript 平台下的差异点与细节。FlatBuffers JavaScript 库与生成代码的位置按照官方文档说明FlatBuffers 的 JavaScript 运行时库代码位于flatbuffers/js其中的核心是flatbuffers.js提供flatbuffers.Builder、flatbuffers.ByteBuffer、flatbuffers.Encoding、flatbuffers.Long等运行时对象。在当前仓库快照中可以直接查看与之配套的生成代码与测试monster_test_generated.js由flatc --js从 monster_test.fbs 生成的 JavaScript 类MyGame.Example.Monster等类型即来自此文件namespace_test/ 与 union_vector/ 下的*_generated.js演示命名空间与 union 的代码生成结果JavaScriptTest.js完整的 JS 测试入口覆盖读取、构建、64 位整数、Unicode 等场景。运行 JavaScript 库的测试测试代码位于flatbuffers/tests主测试文件是 JavaScriptTest.js。运行方式由 JavaScriptTest.sh 封装其核心两行命令如下../flatc -b -I include_test monster_test.fbs unicode_test.json node JavaScriptTest ./monster_test_generated第一行先用flatc把 schemamonster_test.fbs与 JSON 数据unicode_test.json编译为二进制 FlatBuffer-b表示生成二进制文件-I include_test指定 include 搜索路径第二行启动 Node.js 运行测试并以命令行参数传入生成代码模块路径./monster_test_generated。注意运行 JS 测试需要 Node.js。测试脚本在解析命令行参数后通过require(process.argv[2]).MyGame加载生成代码见 JavaScriptTest.js。测试覆盖的能力从源码中可以直接印证读取 C 生成的二进制读取monsterdata_test.mon由monsterdata_test.json生成再通过testBuffer校验字段纯 JS 构建用初始大小仅为 1 的new flatbuffers.Builder(1)从零构建 FlatBuffer刻意验证 Builder 的扩容算法原地修改mutate_hp(120)修改后再次断言并验证mutate_mana对默认值字段返回false未序列化的字段不可修改64 位整数通过flatbuffers.Long验证高低 32 位与toFloat64()转换Unicode读写unicode_test.json中的中文字符串并验证flatbuffers.Encoding.UTF8_BYTES编码路径。此外仓库还提供 JavaScriptUnionVectorTest.js专门覆盖 union 向量的读写是理解 union 类型 JS 用法的补充示例。在代码中读取一个 FlatBufferFlatBuffers 在 JavaScript 中同时支持读取与写入。使用流程是先用flatc --js从 schema 生成 JavaScript 类然后在代码中引入运行时库与生成代码即可读写 FlatBuffer。读取二进制文件的典型流程为将文件读入Uint8Array→ 用flatbuffers.ByteBuffer包装 → 调用生成类上的getRootAsMonster得到根对象。下面同时给出 Node.js模块加载器与浏览器HTML/JavaScript两种写法。Node.js 写法// Note: These require functions are specific to JavaScript module loaders // (namely, Node.js). See below for a browser-based example. var fs require(fs); var flatbuffers require(../flatbuffers).flatbuffers; var MyGame require(./monster_generated).MyGame; var data new Uint8Array(fs.readFileSync(monster.dat)); var buf new flatbuffers.ByteBuffer(data); var monster MyGame.Example.Monster.getRootAsMonster(buf);浏览器写法script src../js/flatbuffers.js/script script srcmonster_generated.js/script script function readFile() { var reader new FileReader(); // This example uses the HTML5 FileReader. var file document.getElementById( file_input).files[0]; // monster.dat from the HTML input field. reader.onload function() { // Executes after the file is read. var data new Uint8Array(reader.result); var buf new flatbuffers.ByteBuffer(data); var monster MyGame.Example.Monster.getRootAsMonster(buf); } reader.readAsArrayBuffer(file); } /script !-- Open the HTML file in a browser and select monster.dat from the input field. -- input typefile idfile_input onchangereadFile();两种方式的共同点都必须先把二进制数据放进Uint8Array再构造flatbuffers.ByteBuffer。区别仅在于数据来源——Node.js 用fs.readFileSync浏览器用 HTML5 的FileReader.readAsArrayBuffer。拿到根对象后就可以像普通对象一样按字段名调用访问器var hp monster.hp(); var pos monster.pos();其中hp()返回标量pos()返回嵌套的 struct/table 对象可以继续调用pos.x()、pos.y()等方法测试中的断言如pos.x() 1、pos.test2() MyGame.Example.Color.Green均在 JavaScriptTest.js 中有对应验证。从零构建 FlatBufferBuilder 的典型用法除了读取JavaScript 运行时同样支持在内存中构建 FlatBuffer 并序列化。仓库测试 JavaScriptTest.js 给出了一个完整范例其构建顺序非常关键创建 Buildernew flatbuffers.Builder(1)初始容量 1 用于刻意触发扩容路径实际使用时建议给一个比预期结果更大的初始值以提升性能先创建字符串与向量fbb.createString(MyMonster)、MyGame.Example.Monster.createInventoryVector(fbb, [0, 1, 2, 3, 4])—— 所有嵌套内容必须先于其所在 table 创建创建嵌套 tablestartMonster(fbb)→addName/addPos/addHp/addInventory/addTestType/addTest/addTest4/addTestarrayofstring/addTestbool→endMonster(fbb)得到该 table 的 offset收尾MyGame.Example.Monster.finishMonsterBuffer(fbb, mon)写入根对象偏移使该 buffer 成为一个合法的 FlatBuffer导出字节fbb.asUint8Array()可直接写文件测试中写为monsterdata_javascript_wire.mon。值得注意的实现细节均有测试佐证先建后加createString、createTest、startTest4Vector必须在startMonster之前执行因为 FlatBuffers 是自底向上从叶子到根构建的vector 与 table 的 offset 复用addTest4(fbb, test4)传入的是向量结束后的 offsetaddTest(fbb, mon2)传入的是子 table 的 offset64 位支持flatbuffers.Long(low, high)以两个 Uint32 表示 64 位整数读取端用toFloat64()还原见 JavaScriptTest.js这也解释了为什么 JS 中addVal需要显式传入Long而非数字Unicode 支持字符串访问可传入flatbuffers.Encoding.UTF8_BYTES以字节方式读取写入时也可用createString(new Uint8Array(...))构造见 JavaScriptTest.js。文本解析的限制需要特别说明当前 JavaScript 运行时不支持从文本schema 或 JSON直接解析 FlatBuffers。也就是说JS 侧无法像flatc那样把 JSON 文件转成二进制文本→二进制的转换必须依赖flatc命令行工具完成这正是JavaScriptTest.sh中先用flatc -b生成.mon文件再交给 Node.js 读取的原因。如果需要批量转换 schema JSON 为二进制请使用flatc用法见 Compiler。在本仓库中如何继续深入想了解 schema 如何描述 table/struct/union/vector阅读 monster_test.fbs 与 Schemas想对照各语言用法差异仓库 docs 下还有 CppUsage.md、PythonUsage.md、TypeScriptUsage.md 等同类指南想理解 FlatBuffers 在 MNN 中的实际地位MNN 的算子与模型 schema 定义在 schema/default.fbs文件预生成的 C 头文件在 schema/current而3rd_party/flatbuffers正是为编译这些 schema 而内置的 FlatBuffers 依赖——JavaScript 只是 FlatBuffers 多语言生态中的一环掌握它有助于从数据格式视角理解 MNN 模型文件的构成。【免费下载链接】MNNMNN: A blazing-fast, lightweight inference engine battle-tested by Alibaba, powering high-performance on-device LLMs and Edge AI.项目地址: https://gitcode.com/GitHub_Trending/mn/MNN创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 在 MNN 仓库中使用 FlatBuffers JavaScript 库：读取、构建与测试完整指南
在 MNN 仓库中使用 FlatBuffers JavaScript 库读取、构建与测试完整指南【免费下载链接】MNNMNN: A blazing-fast, lightweight inference engine battle-tested by Alibaba, powering high-performance on-device LLMs and Edge AI.项目地址: https://gitcode.com/GitHub_Trending/mn/MNN导读本指南以 MNN 仓库内3rd_party/flatbuffers自带文档 JavaScriptUsage.md 为主体系统讲解如何在 JavaScriptNode.js 与浏览器环境中使用 FlatBuffers从flatc --js生成代码、用ByteBuffer读取二进制、到从零构建 FlatBuffer 并落地为测试用例。读完本文你将掌握一套可直接复用的 FlatBuffers JS 读写工作流并能基于仓库中的 JavaScriptTest.js 验证自己的实现。MNN 的模型与算子定义本身即采用 FlatBuffers schema见 schema/current 下生成的.h文件理解 JS 侧的使用方式也有助于理解 MNN 数据格式的整体设计。前置准备先掌握 FlatBuffers 的基础流程在深入 JavaScript 特有的用法之前建议先按顺序阅读仓库内的三份基础文档Tutorial面向所有支持语言的完整入门教程JavaScript 也在其中是理解本页内容的大前提Building讲解如何编译出flatc编译器CompilerUsing the schema compiler与 SchemasWriting a schema分别说明 schema 编译器的用法与 schema 语法。本页不再重复这些通用内容而是聚焦 JavaScript 平台下的差异点与细节。FlatBuffers JavaScript 库与生成代码的位置按照官方文档说明FlatBuffers 的 JavaScript 运行时库代码位于flatbuffers/js其中的核心是flatbuffers.js提供flatbuffers.Builder、flatbuffers.ByteBuffer、flatbuffers.Encoding、flatbuffers.Long等运行时对象。在当前仓库快照中可以直接查看与之配套的生成代码与测试monster_test_generated.js由flatc --js从 monster_test.fbs 生成的 JavaScript 类MyGame.Example.Monster等类型即来自此文件namespace_test/ 与 union_vector/ 下的*_generated.js演示命名空间与 union 的代码生成结果JavaScriptTest.js完整的 JS 测试入口覆盖读取、构建、64 位整数、Unicode 等场景。运行 JavaScript 库的测试测试代码位于flatbuffers/tests主测试文件是 JavaScriptTest.js。运行方式由 JavaScriptTest.sh 封装其核心两行命令如下../flatc -b -I include_test monster_test.fbs unicode_test.json node JavaScriptTest ./monster_test_generated第一行先用flatc把 schemamonster_test.fbs与 JSON 数据unicode_test.json编译为二进制 FlatBuffer-b表示生成二进制文件-I include_test指定 include 搜索路径第二行启动 Node.js 运行测试并以命令行参数传入生成代码模块路径./monster_test_generated。注意运行 JS 测试需要 Node.js。测试脚本在解析命令行参数后通过require(process.argv[2]).MyGame加载生成代码见 JavaScriptTest.js。测试覆盖的能力从源码中可以直接印证读取 C 生成的二进制读取monsterdata_test.mon由monsterdata_test.json生成再通过testBuffer校验字段纯 JS 构建用初始大小仅为 1 的new flatbuffers.Builder(1)从零构建 FlatBuffer刻意验证 Builder 的扩容算法原地修改mutate_hp(120)修改后再次断言并验证mutate_mana对默认值字段返回false未序列化的字段不可修改64 位整数通过flatbuffers.Long验证高低 32 位与toFloat64()转换Unicode读写unicode_test.json中的中文字符串并验证flatbuffers.Encoding.UTF8_BYTES编码路径。此外仓库还提供 JavaScriptUnionVectorTest.js专门覆盖 union 向量的读写是理解 union 类型 JS 用法的补充示例。在代码中读取一个 FlatBufferFlatBuffers 在 JavaScript 中同时支持读取与写入。使用流程是先用flatc --js从 schema 生成 JavaScript 类然后在代码中引入运行时库与生成代码即可读写 FlatBuffer。读取二进制文件的典型流程为将文件读入Uint8Array→ 用flatbuffers.ByteBuffer包装 → 调用生成类上的getRootAsMonster得到根对象。下面同时给出 Node.js模块加载器与浏览器HTML/JavaScript两种写法。Node.js 写法// Note: These require functions are specific to JavaScript module loaders // (namely, Node.js). See below for a browser-based example. var fs require(fs); var flatbuffers require(../flatbuffers).flatbuffers; var MyGame require(./monster_generated).MyGame; var data new Uint8Array(fs.readFileSync(monster.dat)); var buf new flatbuffers.ByteBuffer(data); var monster MyGame.Example.Monster.getRootAsMonster(buf);浏览器写法script src../js/flatbuffers.js/script script srcmonster_generated.js/script script function readFile() { var reader new FileReader(); // This example uses the HTML5 FileReader. var file document.getElementById( file_input).files[0]; // monster.dat from the HTML input field. reader.onload function() { // Executes after the file is read. var data new Uint8Array(reader.result); var buf new flatbuffers.ByteBuffer(data); var monster MyGame.Example.Monster.getRootAsMonster(buf); } reader.readAsArrayBuffer(file); } /script !-- Open the HTML file in a browser and select monster.dat from the input field. -- input typefile idfile_input onchangereadFile();两种方式的共同点都必须先把二进制数据放进Uint8Array再构造flatbuffers.ByteBuffer。区别仅在于数据来源——Node.js 用fs.readFileSync浏览器用 HTML5 的FileReader.readAsArrayBuffer。拿到根对象后就可以像普通对象一样按字段名调用访问器var hp monster.hp(); var pos monster.pos();其中hp()返回标量pos()返回嵌套的 struct/table 对象可以继续调用pos.x()、pos.y()等方法测试中的断言如pos.x() 1、pos.test2() MyGame.Example.Color.Green均在 JavaScriptTest.js 中有对应验证。从零构建 FlatBufferBuilder 的典型用法除了读取JavaScript 运行时同样支持在内存中构建 FlatBuffer 并序列化。仓库测试 JavaScriptTest.js 给出了一个完整范例其构建顺序非常关键创建 Buildernew flatbuffers.Builder(1)初始容量 1 用于刻意触发扩容路径实际使用时建议给一个比预期结果更大的初始值以提升性能先创建字符串与向量fbb.createString(MyMonster)、MyGame.Example.Monster.createInventoryVector(fbb, [0, 1, 2, 3, 4])—— 所有嵌套内容必须先于其所在 table 创建创建嵌套 tablestartMonster(fbb)→addName/addPos/addHp/addInventory/addTestType/addTest/addTest4/addTestarrayofstring/addTestbool→endMonster(fbb)得到该 table 的 offset收尾MyGame.Example.Monster.finishMonsterBuffer(fbb, mon)写入根对象偏移使该 buffer 成为一个合法的 FlatBuffer导出字节fbb.asUint8Array()可直接写文件测试中写为monsterdata_javascript_wire.mon。值得注意的实现细节均有测试佐证先建后加createString、createTest、startTest4Vector必须在startMonster之前执行因为 FlatBuffers 是自底向上从叶子到根构建的vector 与 table 的 offset 复用addTest4(fbb, test4)传入的是向量结束后的 offsetaddTest(fbb, mon2)传入的是子 table 的 offset64 位支持flatbuffers.Long(low, high)以两个 Uint32 表示 64 位整数读取端用toFloat64()还原见 JavaScriptTest.js这也解释了为什么 JS 中addVal需要显式传入Long而非数字Unicode 支持字符串访问可传入flatbuffers.Encoding.UTF8_BYTES以字节方式读取写入时也可用createString(new Uint8Array(...))构造见 JavaScriptTest.js。文本解析的限制需要特别说明当前 JavaScript 运行时不支持从文本schema 或 JSON直接解析 FlatBuffers。也就是说JS 侧无法像flatc那样把 JSON 文件转成二进制文本→二进制的转换必须依赖flatc命令行工具完成这正是JavaScriptTest.sh中先用flatc -b生成.mon文件再交给 Node.js 读取的原因。如果需要批量转换 schema JSON 为二进制请使用flatc用法见 Compiler。在本仓库中如何继续深入想了解 schema 如何描述 table/struct/union/vector阅读 monster_test.fbs 与 Schemas想对照各语言用法差异仓库 docs 下还有 CppUsage.md、PythonUsage.md、TypeScriptUsage.md 等同类指南想理解 FlatBuffers 在 MNN 中的实际地位MNN 的算子与模型 schema 定义在 schema/default.fbs文件预生成的 C 头文件在 schema/current而3rd_party/flatbuffers正是为编译这些 schema 而内置的 FlatBuffers 依赖——JavaScript 只是 FlatBuffers 多语言生态中的一环掌握它有助于从数据格式视角理解 MNN 模型文件的构成。【免费下载链接】MNNMNN: A blazing-fast, lightweight inference engine battle-tested by Alibaba, powering high-performance on-device LLMs and Edge AI.项目地址: https://gitcode.com/GitHub_Trending/mn/MNN创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考