ES6环境下如何导入使用Emscripten FS及file_packager生成文件

问题背景 #

当前使用Emscripten生成ES6格式的导出模块，所用编译命令如下：

emcc -Wl,-rpath,./wasm -Wl,-rpath,./wasm --rtlib=compiler-rt -Wl,-rpath,./wasm -Wl,-rpath,./wasm --rtlib=compiler-rt --no-entry -sALLOW_MEMORY_GROWTH=1 -sFORCE_FILESYSTEM=1 -sEXPORT_ALL=1 -sLINKABLE=1 -sMODULARIZE=1 -sEXPORT_ES6=1 -sEXPORT_NAME=libfrutil

目前生成的库运行正常，可通过ES6语法导入完整的WASM绑定。需要让以下file_packager命令生成的FS库正常工作：

file_packager fs.data --js-output=fs.js --export-name=libfreerad --preload ~/Documents/Repositories/projects/fr-server/share/dictionary@/share/dictionary

现有基础调用代码如下：

import libfrutil from "../util/libfrutil-util";

const wasm = await libfreeradiusUtil(0);
const error = wasm.cwrap("fr_strerror", "string", []);

现存疑问：已知.data文件需要部署到可被请求访问的路径以支持fetch加载，但fs.js的使用方式不明确，是否需要像导入libfrutil一样将其作为ES模块导入？目前公开资料中ES6模式下使用Emscripten FS的示例较少，排查难度较高。

解决步骤 #

按以下顺序调整即可正常使用预加载的文件系统：

• 修正file_packager的参数匹配问题
  主WASM模块设置的导出名为libfrutil，原命令中--export-name=libfreerad与主模块名不匹配，会导致FS挂载逻辑找不到对应模块实例，必须将该参数改为和主模块 EXPORT_NAME 一致的值。
• 为file_packager增加ES6模块输出参数
  默认配置下file_packager生成的是普通全局脚本，无法在ES6模块环境中通过import正常导入，需要追加 --es6 参数输出符合ES6规范的代码。修正后的完整打包命令：

  file_packager fs.data --js-output=fs.js --export-name=libfrutil --es6 --preload ~/Documents/Repositories/projects/fr-server/share/dictionary@/share/dictionary
  

• 静态资源部署
  将生成的fs.js、fs.data和主WASM产物放到同一静态资源目录下，保证fs.data可通过相对路径被正常请求，若需要放到自定义路径，可在初始化WASM时通过locateFile配置映射规则。
• 调整代码导入与初始化逻辑
  严格遵循「主模块初始化完成后再挂载FS」的顺序，参考代码如下：

  import libfrutil from "../util/libfrutil-util";
  // 像导入普通ES模块一样导入file_packager生成的fs.js
  import fsInit from "../util/fs.js";
  
  // 初始化主WASM实例
  const wasm = await libfrutil({
    // 若fs.data存放在自定义路径，在这里返回对应访问地址，同目录部署可省略该配置
    locateFile: (path) => {
      if (path.endsWith("fs.data")) {
        return "/your/custom/static/path/fs.data";
      }
      return path;
    }
  });
  
  // 执行FS初始化，等待数据加载、文件系统挂载完成
  await fsInit(wasm);
  
  // 后续可正常调用WASM逻辑，也可通过wasm.FS直接操作虚拟文件系统
  // 例如验证挂载结果：const dictContent = wasm.FS.readFile("/share/dictionary", {encoding: "utf8"})
  const error = wasm.cwrap("fr_strerror", "string", []);
  

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