无法将已编译的 javascript 文件从 Emscripten for WebAssembly（C++ 编写）导入到 React

Question

嗨，我已经通过emcc （emscripten 前端）编译了 C++ 文件。 我期望的 output 是一个.wasm 文件和.js 文件来实现 javascript。

我构建了 React 应用程序，它尝试通过.js 模块导入 WebAssembly，如下所示。 ( ./wasm/dist/my-module is.js 由 emcc 编译的模块)

import { useEffect } from 'react';
import myModule from './wasm/dist/my-module'
import './App.css';

function App() {
  useEffect(() => {
    myModule().then((output: unknown) => console.log(output))
  }, [])

  
  return (
    <div className="App">
      <header className="App-header">
        <h1>Docker Wasm Builder.</h1>
      </header>
    </div>
  );
}

export default App;

问题是 chrome 中的控制台表示错误“文件：//协议不允许” ，这很奇怪。 因为我已经构建它并在网络服务器（nginx）中运行 output。 来自谷歌浏览器控制台的错误

*我已经尝试创建一个独立的.html 文件并导入 my.js 模块（来自 emcc 编译器）。 它工作得很好，但在 React 中却不行。

我的 emcc 脚本

emcc \
${OPTIMIZE} \
--bind \
--no-entry \
-s STRICT=1 \
-s ALLOW_MEMORY_GROWTH=1 \
-s MALLOC=emmalloc \
-s MODULARIZE=1 \
-s EXPORT_ES6=1 \
-s ENVIRONMENT=web \
-o ./my-module.js \
src/wasm/my-module.cpp

Answer 1

看看这个。 基本上，编译成 -o something 。 mjs并添加 -s SINGLE_FILE=1。 这将为您提供单个.mjs 而不是常规的一对.js 和.wasm，避免所有麻烦。