使用Emscripten从c++编译Webassembly

Question

我正试图将各种c++文件编译成wasm文件，随后嵌入到网站中。这个网站是用React构建的，所以我基本上需要找到一种方法来嵌入Javascript中的wasm文件。

我正在寻找关于完成这项任务的最佳方法的见解，无论是修复我当前的过程还是完全使用Emscripten以外的东西。

到目前为止我所做的是:

我用Emscripten在Mac Ventura 13.1上编译

em++ -std=c++17 test.cpp -Os -s WASM=1 -s SIDE_MODULE=1 -s BINARYEN_ASYNC_COMPILATION=0 -o add.wasm

test.cpp为

extern "C" {
int add(int x, int y) {
return x + y;
}
}

最后，Javascript是:

import React from 'react';
function Demo() {
function instantiate(bytes, imports) {
return WebAssembly.compile(bytes).then(m => new WebAssembly.Instance(m, imports));
}
var importObject = { imports: { i: arg => console.log(arg) } };  
fetch('./add.wasm').then(response => response.arrayBuffer())
.then(bytes => instantiate(bytes, importObject))
.then(instance => instance.exports.e());
return (
<div>
<p>First trial of embedding webassembly</p>
<p>Test</p>
</div>
);
}
export default Demo;

在网站上部署时，会产生以下错误:错误消息

再次，我正在寻找专业知识，无论是在javascript中嵌入wasm文件的新方法，还是对我的编译或其他代码进行修改。

Answer 1

错误消息中的十六进制值以0x3c 0x21开头，这是<和!这意味着您的add.wasm文件可能是一个以&quot;>

使用emscripten模块最简单的方法是输出一个.js文件(例如"emcc -o out.js")，然后加载生成的JS文件。生成的JS文件负责加载wasm文件并提供所需的导入。