将 WASM 文件导入 Electron 主进程答案

【问题标题】：Importing WASM files into Electron main process将 WASM 文件导入 Electron 主进程
【发布时间】：2020-09-17 23:40:21
【问题描述】：

我正在构建一个需要使用 Web-Assembly (WASM) 的 Electron 应用程序，但是在导入我的 WASM 文件时，我遇到了 Fetch 抛出 TypeError: Only absolute URLs are supported 的问题。

另外，这可能会引发更广泛的问题，即应该使用 Electron 主进程还是渲染器进程来运行 WASM ？它似乎在渲染过程中起作用。

这是完整的错误：

TypeError: Only absolute URLs are supported
    at parseURL (/Users/devuser/development/electron-api-demos/node_modules/node-fetch/dist/index.cjs:897:8)
    at new Request (/Users/devuser/development/electron-api-demos/node_modules/node-fetch/dist/index.cjs:922:17)
    at /Users/devuser/development/electron-api-demos/node_modules/node-fetch/dist/index.cjs:1175:19
    at new Promise (<anonymous>)
    at fetch (/Users/devuser/development/electron-api-demos/node_modules/node-fetch/dist/index.cjs:1173:9)
    at IpcMainImpl.<anonymous> (/Users/cbourne/development/electron-api-demos/main-process/communication/async-msg.js:20:36)
    at IpcMainImpl.emit (events.js:223:5)
    at WebContents.<anonymous> (electron/js2c/browser_init.js:4093:15)
    at WebContents.emit (events.js:223:5)

这是我正在测试的主流程代码：

const {ipcMain} = require('electron')
require('/Users/devuser/development/electron-api-demos/script/wasm_exec.js')

const fetch = require("node-fetch");

ipcMain.on('asynchronous-message', (event, arg) => {

  if (!WebAssembly.instantiateStreaming) { // polyfill
    WebAssembly.instantiateStreaming = async (resp, importObject) => {
      const source = await (await resp).arrayBuffer();
      return await WebAssembly.instantiate(source, importObject);
    };
  }

  const go = new Go();
  let mod, inst;
  WebAssembly.instantiateStreaming(fetch("test.wasm"), go.importObject).then((result) => {
    mod = result.module;
    inst = result.instance;
    document.getElementById("runButton").disabled = false;
  }).catch((err) => {
    console.error(err);
  });

  async function run() {
    console.clear();
    await go.run(inst);
    inst = await WebAssembly.instantiate(mod, go.importObject); // reset instance
  }

  event.sender.send('asynchronous-reply', 'pong')
})

【问题讨论】：

标签： node.js electron webassembly

【解决方案1】：

您是否尝试过将fetch("test.wasm") 更改为fetch("./test.wasm") 或至少出于开发目的硬编码本地文件的直接路径？

【讨论】：

请避免在回答中提出（修辞）问题。他们冒着被误认为根本不是答案的风险。此外，您的回答缺乏解释它为什么起作用以及它应该如何提供帮助。
这并没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker.

【解决方案2】：

问题根本不是 WASM，而是应该获取二进制文件的请求。您的fetch 来自node-fetch；主进程在 Node.js 中运行，因此没有像普通页面那样的基地址。要么提供完整的 file:/// 绝对 URL 到 fetch，或者更轻松地使用 fs.readFileSync：

const fs = require('fs');
WebAssembly.instantiate(fs.readFileSync("text.wasm"));

【讨论】：

【解决方案3】：

我只能回答你的部分问题。

WASM 应该不在主进程中运行。即使 WASM 将在独立线程中运行，您也应该尽可能减少 Main 进程的负载。当主进程被阻塞时，即使是最小化你的应用程序也不会发生，直到它被解除阻塞。

欲了解更多信息，这是一篇好文章：https://medium.com/actualbudget/the-horror-of-blocking-electrons-main-process-351bf11a763c

【讨论】：