如何使用vue3+vite编译Web Worker？

Question

我有一个简单的 Web Worker，它执行启动并处理来自 websocket 的消息。处理程序的逻辑是从另一个模块“MessageHandler”导入的。原因是 websockets 无论如何都依赖于外部依赖项（stompjs），我想为不支持 webworkers 的浏览器保留一个带有消息挂起逻辑的模块。

import { connect, destroy } from "../src/utilities/MessageHandler";

onmessage = (message) => {
  const {type, value} = message.data;
  switch (type?.toLowerCase()) {
    case "connect":
      connect(value, message => postMessage(message))
      break;
    case "destroy":
      destroy();
      break;
  }
}

在开发服务器上，这工作正常，我可以将文件放在公共文件夹中，并使用以下命令启动 Worker：

  if (typeof Worker !== "undefined") {
    const workerUrl = new URL("/worker.js", import.meta.url);
    const worker = new Worker(workerUrl, {type:"module"});
    console.log(workerUrl);
    worker.postMessage({type:"connect", value: {...channelInfo}},);
    worker.onmessage = combineValues;
    onUnmounted(() => {
      worker.postMessage({type:"destroy"},);
      worker.terminate();
    })
  } else {
    console.log("Workers not allowed. Reverting to single threaded application.");
    connect(channelInfo, combineValues)
    onUnmounted(() => destroy())
  }

但是，当我为生产进行构建时，从 MessageHandler 导入的内容不会编译到工作文件中，并且程序无法执行。有没有办法配置 vite 以正确捆绑此 Web Worker，而无需手动将所有依赖项复制到文件中，并且 WW 文件是否必须保留在公共文件夹中？如果有一种方法可以使用 Worker 文件的 typescript 而不是被迫返回 JS，那就加分了。

Answer 1

这样做的方法是像这样导入worker

new Worker(
  new URL('./worker', import.meta.url),
  {type: 'module'}
);

其中

./worker

不在公共文件夹中，而是像任何其他导入一样在 src 文件夹中。

请参阅 vite 文档中的本节

Answer 2

虽然接受的答案运行良好，但 vite 提供了一种使用查询后缀

?worker

 导入工作人员的更简单方法。

示例：

import MyWorker from './worker?worker'

const worker = new MyWorker()

由于多种原因，这更有用：

您不需要将工作脚本放在
• public

   文件夹中。相反，您可以将其包含在 

  src

   文件夹中。

您可以使用别名。例如，如果
• @

   指向 

  src

   文件夹，那么您就可以 

  import MyWorker from '@/worker?worker'

  。

如果你在 vue 项目中使用了 typescript，你也可以使用 typescriptworker，而不需要单独编译它。

更多信息：

https://vitejs.dev/guide/features.html#web-workers