使用Emcc与Wasm在网页调用C函数无输出问题排查

以下是针对你遇到的页面无输出问题的具体修复步骤：

1. 修复文件导入路径错误 #

index.js 中尝试导入 .mjs 后缀的文件，但实际文件名是 .js，导致模块无法加载：
修改 index.js 第一行：

// 原代码
import { WASM_add } from "./wasm_mjs_interface.mjs";

// 修改后
import { WASM_add } from "./wasm_mjs_interface.js";

2. 修正WASM模块初始化逻辑 #

启用 -s MODULARIZE=1 后，Emscripten 生成的 JS 模块是工厂函数，需调用它获取实例，而非直接绑定 onRuntimeInitialized 事件：
替换 wasm_mjs_interface.js 全部内容为：

import MyWasmLib from "./MyWasmLib.js";

let addWasmFunction;
let WASM_initialized;

const initializeWASM = () => {
    WASM_initialized = MyWasmLib()
        .then(instance => {
            // 从实例中获取cwrap方法并绑定add函数
            addWasmFunction = instance.cwrap("add", "number", ["number", "number"]);
        })
        .catch(error => {
            console.error("WASM初始化失败:", error);
            throw error;
        });
};

initializeWASM();

export const WASM_add = async (a, b) => {
    await WASM_initialized;
    try {
        return addWasmFunction(a, b);
    } catch (error) {
        console.error("调用WASM加法函数出错:", error);
        throw error;
    }
};

3. 重新构建WASM文件 #

执行以下命令清理旧文件并重新编译：

make clean && make

4. 重启服务并测试 #

停止当前Python服务器，重新启动：

python3 -m http.server 8000

刷新Firefox页面，此时控制台应输出 WASM addition result: 8，页面p标签也会显示数字8。

问题根源说明 #

• 路径错误：浏览器无法找到指定的 .mjs 文件，导致后续代码完全未执行。
• 初始化逻辑错误：MODULARIZE模式下，导出的是工厂函数而非直接的实例对象，原代码绑定的 onRuntimeInitialized 事件永远不会触发，导致Promise一直处于pending状态，后续函数无法执行。

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