如何在 javascript 中创建模块工作者

Question

我正在开发一个严重依赖网络工作者的程序。但我无法让它们按要求运行。这只是一个缩小的示例，但格式或多或少相似。

我有 4 个文件：

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello World!</title>
  </head>
  <body>
      <button id="btn">GO</button>
      <script src="./index.js" type="module"></script>
  </body>
</html>

index.js

const worker = new Worker("./worker.js", {type: "module"})

worker.addEventListener("message", async ({ data }) => {
    console.log(data);
});

worker.onerror = function (event) {
    throw new Error(event.message + " (" + event.filename + ":" + event.lineno + ")");
}

window.sendMessage = function (args) {
    worker.postMessage(args);
};

async function onclick() {
    sendMessage("World")
}

document.getElementById("btn").addEventListener("click", onclick, false);

worker.js

import * as p from "hello.js"

console.log("Worker Started")

onmessage = function (e) {
    p.greet(e.data)
}

hello.js

export function greet(who){
    alert("Hello " + who)
}

worker 应该输出“Worker Started”。

单击按钮时，UI 线程将向工作人员发送消息，然后工作人员将调用 greet 函数。

但是工作人员立即出错并通过 worker.onerror

returns 一个值

它 returns 在 Chromium（和基于 Chromium 的）中的值未定义

Uncaught Error: undefined (undefined:undefined)
    at Worker.worker.onerror (index.js:8:11)

我已经在具有 3 个不同操作系统的 2 台计算机上的各种浏览器上对此进行了测试，但没有成功。

据我了解。 Firefox 不支持我这样做的方式。

Uncaught Error: SyntaxError: import declarations may only appear at top level of a module (http://localhost:8000/worker.js:1)

我在这里看过这个答案但是它不允许我将文件导入我的工作函数。

运行 chrome 与 chromium --allow-file-access-from-files 没有解决问题

示例是运行通过

使用本地服务器

 python -m http.server

这是包含文件的存储库 https://github.com/KivalM/web-workers

Answer 1

在没有 .message、.filename 或 .lineno 的 Worker 上出现此类错误指向网络错误，如果是脚本错误，您会得到这些错误。
也许你的workerURL也无效，但至少你的模块一是.
如果不使用模块映射，则必须在相对导入 URLs.

前添加 ./

import * as p from "./hello.js"

修复此问题后，您将面临新错误，这次是脚本错误： alert() 只能在 Window 上下文中访问。您不能从 Worker 调用此方法。即使在 Window 上下文中，你也应该避免使用它，因为它对 JS 环境的影响远非显而易见，而且在调试方面通常不如控制台 API.

有用。

如何在 javascript 中创建模块工作者

How to create a module worker in javascript

javascript

html

google-chrome

web-worker