在 Vite 项目构建时加载工作脚本

Question

是否可以创建定义一个 Web Worker，使其不必在 vite 项目运行时从外部文件加载？ 我正在构建一个依赖于 Web Worker 文件的浏览器，并且我想构建一个可以在项目外部使用的 index.js 资产文件。问题是我需要将 index.js 资产文件与 Web Worker 文件一起部署，因为它是通过 URL 加载的。 是否可以允许将 Web Worker 的逻辑包含到最终的 index.js 文件中，以便可以在同一个 index.js 资源文件中定义和加载它？

Answer 1

假设您有一个 Web Worker 的代码，但您不想将其保存在单独的文件中，而是希望将其整齐地放入主 JavaScript 文件中。这样，当您构建 Vite 项目时，所有内容都会捆绑到一个方便的包中。

const workerCode = `
  self.onmessage = (event) => {
    const result = event.data * 2; 
    self.postMessage(result);
  };
`;

const blob = new Blob([workerCode], { type: 'application/javascript' });
const workerUrl = URL.createObjectURL(blob);

const worker = new Worker(workerUrl);

worker.postMessage(5);

worker.onmessage = (event) => {
  console.log('Received from worker:', event.data);
};

worker.terminate();
URL.revokeObjectURL(workerUrl);