如何在React应用中加载并调用Javy编译的Wasm函数

一、修复wasmModule.main is not a function错误 #

直接通过import('./main.wasm')无法正确实例化Javy编译的Wasm模块——这类模块遵循WebAssembly Component Model，且依赖WASI环境，需要通过WebAssembly API手动加载并配置环境。

修改React加载代码 #

import { useEffect } from 'react';
import { WASI } from '@bytecodealliance/preview2-shim';

function App() {
  useEffect(() => {
    const loadAndRunWasm = async () => {
      // 1. 从public目录加载Wasm二进制文件
      const response = await fetch('/main.wasm');
      const bytes = await response.arrayBuffer();

      // 2. 配置WASI环境（Javy编译的模块依赖WASI）
      const wasi = new WASI({
        args: [],
        env: {},
        preopens: {}
      });

      // 3. 准备实例化所需的导入对象
      const importObject = {
        wasi_snapshot_preview1: wasi.wasiImport
      };

      // 4. 实例化Wasm模块
      const { instance } = await WebAssembly.instantiate(bytes, importObject);

      // 5. 重定向WASI标准输出到浏览器控制台
      wasi.setStdout(new TextEncoderStream().readable.pipeTo(new WritableStream({
        write(chunk) {
          console.log(new TextDecoder().decode(chunk));
        }
      })));

      // 6. 调用导出的main函数
      instance.exports.main();
    };

    loadAndRunWasm();
  }, []);

  return <div>Loading Wasm Module...</div>;
}

export default App;

配套操作 #

1. 安装WASI模拟依赖：

   npm install @bytecodealliance/preview2-shim
   

2. 将编译好的main.wasm放入React项目的public目录（避免webpack处理导致路径错误）。

二、实现参数传递与返回值获取 #

通过WIT文件定义函数的输入输出类型，Javy会自动处理JS与Wasm之间的类型转换。

1. 修改WIT与JS代码 #

Wit文件（定义带参数和返回值的函数）：

package local:main;

world index-world {
  export add: func(a: s32, b: s32) -> s32;
  export greet: func(name: string) -> string;
}

JS代码：

export function add(a, b) {
  return a + b;
}

export function greet(name) {
  return `Hello, ${name}!`;
}

2. 重新编译Wasm #

保持原编译命令不变：

javy compile main.js --wit main.wit -n index-world -o main.wasm

3. 在React中调用带参函数 #

修改加载逻辑中的调用部分：

// 调用整数加法函数
const addResult = instance.exports.add(5, 3);
console.log('Add Result:', addResult); // 输出8

// 调用字符串处理函数
const greetMsg = instance.exports.greet('Bob');
console.log('Greeting:', greetMsg); // 输出"Hello, Bob!"

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