简单 Web Worker 无法在 Firefox 106.0.5 上的 SvelteKit 中工作

Question

在我的主文件中，我有

const loadWorker = async () => {
        const SyncWorker = await import("$lib/canvas.worker?worker");
        syncWorker = new SyncWorker.default();

        syncWorker?.postMessage({});
    };

然后在我的卸载中

onMount(() => {
        console.log("Canvas: mounted");
        loadWorker();
});

然后在我的 canvas.worker.ts 文件中，我有一个简单的

onmessage = () => {
    console.log("Hello from the worker!");
};

export {};

此消息在 Chrome 中成功打印，但在 Firefox 中我得到的只是

语法错误：导入声明只能出现在模块的顶层

这是因为工作人员存储在我的本地系统上，也许有一个特殊的标志允许将系统文件加载为工作人员（因为这似乎可能是一个安全问题）？ Firefox 文档说我的浏览器应该支持工人。

Answer 1

嗯，我应该更好地阅读文档。

服务人员仅在生产构建中工作，而不在开发中工作。 要在本地测试，请使用vite预览

https://kit.svelte.dev/docs/service-workers

或者就我而言，“npm run build && npm run Preview”有效。

Answer 2

您可以使用nodemon自动化构建脚本。

npm install -D nodemon

并在 package.json 中添加一个像这样的新脚本

“sw-dev”：“nodemon --watch src --ext * --exec“npm run build && npm run Preview””

如果您想在不受支持的浏览器上进行开发，这只是一种解决方法，而不是一个好的解决方案。否则就坚持使用基于 Chrome 的浏览器。