我想从 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 函数运行。
但这显然不是我应该做的。所以。 。 。什么是正确的方法?
我最终在博客文章中找到了答案。如果我将标志
-sSINGLE_FILE=1
添加到 .wasm 编译中,wasm 文件就会嵌入到 .js 文件中,这意味着我不必弄清楚如何加载它。