如何加载存储在子目录中的wasm文件

Question

我正在尝试一个简单的示例，以使用JavaScript调用C函数。

这是counter.c文件：

#include <emscripten.h>
int counter = 100;
EMSCRIPTEN_KEEPALIVE
int count() {  
    counter += 1;
    return counter;
}

我使用emcc counter.c -s WASM=1 -o counter.js进行了编译。

我的main.js JavaScript文件：

Module['onRuntimeInitialized'] = onRuntimeInitialized;
const count = Module.cwrap('count ', 'number');
function onRuntimeInitialized() {
    console.log(count());
}

我的index.html文件仅加载两个.js文件，没有其他内容：

<script type="text/javascript" src="counter.js"></script>
<script type="text/javascript" src="main.js"></script>

它可以正常工作/将101打印到控制台，，但是当我将counter.c文件移动到wasm subdirectory 时，将其重新编译为Emscripten并将script标记更新为 src="wasm/counter.js"， counter.js counter.wasm从根目录而不是wasm子目录中，我得到错误：

counter.js:190 failed to asynchronously prepare wasm: failed to load wasm binary file at 'counter.wasm'

我做了一些研究，但是我找不到任何方法告诉Emscripten让生成的.js文件从同一子目录中加载.WASM。

Answer 1

正如Coline在其他答案中所解释的那样，您应该查看EMCC编译器（Counter.js）生成的IntegrateWasmjs（）函数。该功能的主体最近发生了变化，现在看起来像这样：

function integrateWasmJS() {
    ...
    var wasmBinaryFile = 'counter.wasm';
    if (typeof Module['locateFile'] === 'function') {
        ...
        if (!isDataURI(wasmBinaryFile)) {
          wasmBinaryFile = Module['locateFile'](wasmBinaryFile);
        }
        ...
    }
}

如果是这种情况，则应在全局模块变量中添加"定位文件"函数。因此，在您的html中，您可以在导入counter.js文件之前添加以下片段：

<script>
  var Module = {
    locateFile: function(s) {
      return 'wasm/' + s;
    }
  };
</script> 

Answer 2

如果您查看emscripten创建的生成的'loader'文件，则具有integrateWasmJS函数，如下：

function integrateWasmJS(Module) {
  var method = Module['wasmJSMethod'] || 'native-wasm';
  Module['wasmJSMethod'] = method;
  var wasmTextFile = Module['wasmTextFile'] || 'hello.wast';
  var wasmBinaryFile = Module['wasmBinaryFile'] || 'hello.wasm';
  var asmjsCodeFile = Module['asmjsCodeFile'] || 'hello.temp.asm.js';
  ...
}

您可以看到wasmBinaryFile指示二进制的位置。如果未设置，则提供默认值。

看起来您应该能够在main.js文件中覆盖它：

Module['wasmBinaryFile'] = 'wasm/counter.wasm';