如何从JavaScript运行WASM模块？WASI适配及跨环境运行问题

一、修复浏览器加载WASI WASM的错误 #

你遇到的import object field 'wasi_snapshot_preview1' is not an Object错误，根源是该WASM基于WASI目标编译，而浏览器原生不支持WASI接口，需要引入WASI polyfill模拟相关能力。

实现步骤 #

1. 安装WASI兼容库
   使用npm安装必要的依赖：

   npm install @wasmer/wasi @wasmer/wasmfs
   

2. 修改HTML文件
   改用ES模块加载脚本，避免全局依赖问题：

   <!doctype html>
   <html lang="en">
   <head>
     <meta charset="utf-8">
     <title>Figlet WASM Test</title>
     <script type="module" src="figlet.js"></script>
   </head>
   <body>
     <pre id="output"></pre>
   </body>
   </html>
   

3. 重写JS逻辑
   初始化WASI环境，模拟命令行参数与标准输出，修改后的figlet.js：

   import WASI from '@wasmer/wasi';
   import WASMFS from '@wasmer/wasmfs';
   
   // 初始化文件系统，模拟WASI的IO环境
   const wasmFs = new WASMFS();
   
   // 配置WASI参数，args数组对应命令行输入（第一个元素为程序名）
   const wasi = new WASI({
     args: ['figlet', 'it works'],
     env: {},
     bindings: {
       ...WASI.default.bindings,
       fs: wasmFs.fs,
       // 捕获WASI程序的标准输出，渲染到页面
       stdout: {
         write: (buf) => {
           const output = new TextDecoder('utf-8').decode(buf);
           document.getElementById('output').textContent += output;
           return buf.length;
         }
       }
     }
   });
   
   // 构建WASI要求的import对象
   const importObject = {
     wasi_snapshot_preview1: wasi.wasiImport
   };
   
   // 加载并运行WASM
   fetch('figlet.wasm')
     .then(response => response.arrayBuffer())
     .then(bytes => WebAssembly.instantiate(bytes, importObject))
     .then(result => wasi.start(result.instance))
     .catch(err => console.error('运行错误:', err));
   

二、传递figlet渲染参数 #

WASI程序通过命令行参数接收输入，只需修改WASI配置的args数组即可：

• 静态修改：直接替换args数组的第二个元素，比如args: ['figlet', 'Hello Browser WASM']
• 动态传递：结合页面输入组件实现，示例如下：

  // 假设页面有输入框<input id="text-input">和按钮<button id="render-btn">
  document.getElementById('render-btn').addEventListener('click', () => {
    const inputText = document.getElementById('text-input').value.trim();
    if (!inputText) return;
  
    const wasmFs = new WASMFS();
    const wasi = new WASI({
      args: ['figlet', inputText],
      env: {},
      bindings: {
        ...WASI.default.bindings,
        fs: wasmFs.fs,
        stdout: {
          write: (buf) => {
            const output = new TextDecoder('utf-8').decode(buf);
            document.getElementById('output').textContent = output;
            return buf.length;
          }
        }
      }
    });
  
    // 重新加载并实例化WASM（WASI实例无法重复启动）
    fetch('figlet.wasm')
      .then(res => res.arrayBuffer())
      .then(bytes => WebAssembly.instantiate(bytes, { wasi_snapshot_preview1: wasi.wasiImport }))
      .then(result => wasi.start(result.instance))
      .catch(err => console.error('渲染错误:', err));
  });
  

三、跨环境兼容：同一份WASM能否同时运行在浏览器和WASI Runtime？ #

可以实现，但需要额外处理，更推荐针对不同环境分别编译，以下是两种方案：

折中兼容方案：编译时导出多入口函数 #

以Rust为例，通过条件编译同时导出WASI入口和浏览器可用函数：

#[cfg(target_os = "wasi")]
fn main() {
    // WASI环境入口：处理命令行参数并输出到stdout
    let args: Vec<String> = std::env::args().collect();
    if args.len() > 1 {
        let text = &args[1];
        let output = figlet_rs::FIGfont::standard().unwrap().convert(text).unwrap();
        println!("{}", output);
    }
}

#[cfg(not(target_os = "wasi"))]
#[no_mangle]
pub extern "C" fn render_figlet(text_ptr: *const u8, text_len: usize) -> *const u8 {
    // 浏览器环境导出函数：接收字符串指针与长度，返回渲染结果指针
    let text = unsafe { std::slice::from_raw_parts(text_ptr, text_len) };
    let text_str = String::from_utf8_lossy(text).to_string();
    let output = figlet_rs::FIGfont::standard().unwrap().convert(&text_str).unwrap();
    let output_bytes = output.into_bytes();
    let ptr = output_bytes.as_ptr();
    std::mem::forget(output_bytes); // 避免内存提前释放
    ptr
}

• 编译为wasm32-wasi时，main会转为_start，可直接在Wasmer中运行
• 编译为wasm32-unknown-unknown时，导出render_figlet函数，供浏览器JS调用

不推荐强行共用同一份WASM的原因 #

• WASI依赖的系统调用（文件系统、进程等）在浏览器中需模拟，性能与兼容性不如原生浏览器WASM
• 浏览器无需WASI的命令行、文件系统等特性，额外兼容层会增加产物体积与复杂度

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