问题

I am trying to compile various C++ files into wasm files to subsequently be embedded in a website. The website is built with React, so I essentially need to find a way to embed wasm files in Javascript.

我正在尝试将多个C++文件编译成wasm文件，然后将其嵌入到网站中。该网站是使用React构建的，因此我基本上需要找到一种在JavaScript中嵌入wasm文件的方法。

I am looking for insight about the best way to accomplish this task, whether it is fixing my current process or using something other than Emscripten entirely.

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

Here is what I have done so far:

到目前为止，我已经完成了以下工作：

I have used Emscripten to compile on Mac Ventura 13.1 with

我已经在Mac Ventura 13.1上使用Emscripten编译了以下内容：

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

The test.cpp is:

test.cpp如下：

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

Finally, the Javascript is:

最后，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;

When deployed on the website, this yields the following error: Error message

在网站上部署时，会出现以下错误：错误消息

Again, I am looking for expertise on either a new approach to embedding wasm files in the javascript or making a modification to my compilation or other code.

再次强调，我正在寻找关于在JavaScript中嵌入wasm文件的新方法或对我的编译或其他代码进行修改的专业意见。

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

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

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;

答案1

得分: 1

错误消息中的十六进制数值以0x3c 0x21开头，这是ASCII码对应的<和!。这意味着你的add.wasm文件很可能是一个以"<!doctype.."开头的HTML文件。

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