当 wasm 完全加载时如何加载 javascript

Question

开始之前，对不起我的英语不好..

我在使用包含 web assembly 模块加载的 javascript 时遇到了一些问题。

我基于 rust 创建了移动键盘，并将其构建为 wasm-pack。

这是我的 Web-pack 构建选项。

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "result.js",
        webassemblyModuleFilename: "MyModule.wasm",
        library: 'MyModule',
        libraryTarget: 'umd',
        libraryExport: ['default'],
        globalObject: 'this',
        umdNamedDefine: true,
    },
...
}

我的 index.js

import KeyPad from "./keypad";

export  default KeyPad;
export {
    KeyPad
};

global.KEYPAD = KeyPad;

我的键盘.js

import * as core from '../pkg/~';
import '../css/style.css';
export default class KeyPad {
    some methods...
}

构建后，我可以获得 wasm 文件并使用命令“npm run build”再次构建它以获取包含 wasm 的 javascript 文件。

在前面的所有过程之后，我使用结果 javascript 文件创建了 html 文件，并调用了函数。

 <script src="./dist/result.js"></script>
 <script type="application/javascript">
    $(() => {
      console.log("globalVar = " + window.MyModule);
      let myModule = new MyModule({});
      myModule.showKey();
    })
  </script>

但是我遇到了未定义的错误，但是我刷新了网站然后我得到了正确的结果。

Uncaught ReferenceError: MyModule is not defined
    at HTMLDocument.<anonymous> ((색인):14:21)
    at e (jquery.min.js:2:30038)
    at t (jquery.min.js:2:30340)
(

刷新后效果很好！

globalVar = class B{}

为了解决这个问题，我分析了结果javascript文件，然后我发现了语法fetch('${MyModule.wasm}).

看来是result javascript中异步加载wasm导致的问题

所以加载了javascript文件，但是wasm在javascript中没有完全加载。结果，Undefined Error but refreshing the web site -> fully loaded wasm file -> get works normally

我想解决未定义的错误。我该如何解决这个问题？？

再次为我糟糕的英语道歉..

Answer 1

你能发布整个代码吗？这里的解决方案似乎是等待资源加载，这通常是通过在

defer

标签中添加

<script>

关键字来在 html 中完成的。像这样的东西：

 <script src="./dist/result.js"></script>
 <script defer type="application/javascript">
    $(() => {
      console.log("globalVar = " + window.MyModule);
      let myModule = new MyModule({});
      myModule.showKey();
    })
  </script>

无论如何，here 是一个 stackoverflow 问题，针对这个问题有多个建议。