如何在无胶水代码下将JS函数导入WebAssembly(Wasm)模块？

错误原因解析 #

你遇到的TypeError: import object field 'GOT.mem' is not an Object，是因为编译时启用了SIDE_MODULE=1参数——这个模式下Emscripten会生成依赖**全局偏移表（GOT）**的Wasm模块，要求导入对象必须包含env.GOT.mem（一个指向Wasm内存的Uint8Array视图）。

正确实现步骤 #

1. 确认C代码的函数声明 #

确保C中声明的extern函数和JS侧实现的签名完全匹配（参数数量、类型一致）：

#include <stdint.h>

// 声明要导入的JS函数
extern void jsClearRect(uint32_t x, uint32_t y, uint32_t width, uint32_t height);
extern void jsFillRect(uint32_t x, uint32_t y, uint32_t width, uint32_t height, uint32_t color);

// 测试调用的Wasm函数
void draw() {
    jsClearRect(0, 0, 640, 480);
    jsFillRect(100, 100, 200, 200, 0xFF00FF);
}

2. 编译命令（保留你的参数） #

继续使用原编译命令，但要明确SIDE_MODULE=1是用于模块拆分场景：

emcc src/main.c -Os -s STANDALONE_WASM=1 -s SIDE_MODULE=1 -o main.wasm

3. 正确的JS导入对象与实例化代码 #

必须为Wasm分配内存，并提供GOT.mem视图，同时注入自定义JS函数：

// 为Wasm模块分配内存空间
const wasmMemory = new WebAssembly.Memory({ initial: 1 });
// 创建GOT.mem的Uint8Array视图，满足模块导入要求
const GOT = { mem: new Uint8Array(wasmMemory.buffer) };

// 实现要导入到Wasm的JS函数
function jsClearRect(x, y, width, height) {
    // 这里可以替换为实际的Canvas绘制逻辑
    console.log(`执行清屏操作：x=${x}, y=${y}, 宽=${width}, 高=${height}`);
}

function jsFillRect(x, y, width, height, color) {
    // 实际绘制逻辑示例
    const hexColor = `#${color.toString(16).padStart(6, '0')}`;
    console.log(`绘制矩形：x=${x}, y=${y}, 宽=${width}, 高=${height}, 颜色=${hexColor}`);
}

// 构造符合要求的导入对象
const importObject = {
    env: {
        ...GOT,
        jsClearRect,
        jsFillRect,
        memory: wasmMemory // 将内存注入模块环境
    }
};

// 加载并实例化Wasm模块
async function loadAndRunWasm() {
    const wasmBytes = await fetch('main.wasm').then(res => res.arrayBuffer());
    const { instance } = await WebAssembly.instantiate(wasmBytes, importObject);
    
    // 调用Wasm中的draw函数
    instance.exports.draw();
}

loadAndRunWasm();

简化方案（无需SIDE_MODULE） #

如果不需要拆分模块，仅需独立的Wasm模块，可以修改编译命令去掉SIDE_MODULE=1，此时导入对象无需GOT相关内容：

emcc src/main.c -Os -s STANDALONE_WASM=1 -s EXPORTED_FUNCTIONS=['_draw'] -o main.wasm

对应的JS导入对象简化为：

const wasmMemory = new WebAssembly.Memory({ initial: 1 });
const importObject = {
    env: {
        jsClearRect,
        jsFillRect,
        memory: wasmMemory
    }
};

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