将 emscripten webassembly 线程 (C++) 与 webpack (create-react-app) 一起使用

Posted 2023-02-22

【中文标题】将 emscripten webassembly 线程 (C++) 与 webpack (create-react-app) 一起使用

【英文标题】：Use emscripten webassembly threads (C++) with webpack (create-react-app)

【发布时间】：2020-09-30 04:35:50

【问题描述】：

我有一个 emscripten/webassembly 包装的 C++ 类，它在内部启动和使用 pthread。在其独立开发沙箱中的 Chrome 上的 javascript 中使用时，它通常可以正常工作。但是，我真的不能让它与 create-react-app 和 webpack 一起工作（即我使用 react-app-rewired 来配置 webpack）。

问题似乎来自线程化 emscripten 构建创建的 javascript 和 wasm 文件的复杂性，以及这些脚本由于 webpack 生成的文件重命名而造成的混乱。为多线程 emscipten 构建生成的文件是：

MyModule.js
MyModule.wasm
MyModule.worker.js

我可以（我认为）通过使用Module 的locateFile 方法使其在只有MyModule.js 和MyModule.wasm 文件的非线程模式下工作。但是，由于引入了新的MyModule.worker.js 文件，系统变得非常混乱，MyModule.js 文件在 WebWorker 中自行启动。当然MyModule.worker.js 文件还需要找到并访问MyModule.wasm，这也会丢失（即由于 webpack 重命名而无法找到正确的文件名）。

不管怎样，我已经花了好几个小时在网上搜索任何像这样的成功用例，并尝试了可能的事情，包括手动编辑 MyModule.js 和 MyModule.worker.js 文件，但到目前为止没有任何运气。

有没有人成功地尝试过这样的事情，或者任何其他关于让多线程 emscripten/wasm 构建与 webpack（或 create-react-app）正常运行的建议？任何建议将不胜感激。

注意：这个问题不是关于在 web-worker 线程中运行 emscripten/webassembly 模块（尽管最后我将在 web-worker 中运行所有这些）。它专门关于多线程 emscripten 构建（即带有 pthreads 的 C++）启动并使用 webpack 正确运行。

【参考方案1】：

在 Module 的 locateFile 中，您应该返回 MyModule.wasm 和 MyModule.worker.js 的正确路径。 此外，在 Module 的 mainScriptUrlOrBlob 中，您应该为 MyModule.js 分配路径。 mainScriptUrlOrBlob 在worker中用于加载wasm。