我想出了如何通过 emscripten 将 WASM 与 nextjs 结合使用，但我的解决方案真的很愚蠢

Question

我想从 next.js 组件调用 C++ 函数。使用 emscripten 和

-sENVIRONMENT='web' -sMODULARIZE=1

标志，我将 C++ 编译为

main.js

和

main.wasm

。我尝试从组件运行它：

import Solver from '@/wasm/main';

export default function WasmComponent() {
    const handleClick = async () => {
        const Module = await Solver();
        const test = Module.cwrap("myfunction", "string", ["string"]);
        console.log(test("test"));
    }
    
    return (
        <Button variant="contained" onClick={handleClick}>Call the WASM Function!</Button>
    )

}

控制台一直给我一个错误，说找不到

http://localhost/_next/static/chunks/main.wasm

。显然我需要将 .wasm 文件加载到 webpack 中，但我不太了解 webpack。经过一两个小时的摆弄

next.config.mjs

没有任何效果，我开始头疼。

或者，我不知道如何告诉 emscripten 选择不同的文件路径来读取 .wasm 文件。它总是会在

http://localhost/_next/static/chunks/

中查找，而且我找不到任何其他选项来配置它。

所以我的天才理论：如果我从名为

http://localhost/_next/static/chunks/main.wasm

的路径静态提供文件，那么从技术上讲，它将位于正确的位置。我在 next.js 项目的

public

文件夹中手动创建了这些目录，并且 它确实有效！ wasm 函数运行。

但这显然不是我应该做的。所以。 。 。什么是正确的方法？

Answer 1

我最终在博客文章中找到了答案。如果我将标志

-sSINGLE_FILE=1

添加到 .wasm 编译中，wasm 文件就会嵌入到 .js 文件中，这意味着我不必弄清楚如何加载它。