为什么 Web Workers 文件必须位于 React 应用程序的公共文件夹中？

Question

我在尝试了解如何在 React 应用程序中使用 Web Worker 时遇到了一个问题： 未捕获的语法错误：意外的标记 '<' (at worker.js:1:1) I did a research on StackOverflow and found out that this problem could be solved just by moving the web worker file to the public folder of my React app. Can someone explain why did it worked?

这有效：

这不起作用并给出错误：

（未捕获的语法错误：意外的标记'<' (at worker.js:1:1))

代码（我认为这并不重要，但无论如何）：

//App.js
import React from "react";

const App = () => {
  console.log("hey");
  const worker = new Worker("worker.js");
  return <div>App</div>;
};

export default App;

//worker.js
console.log("work");

Answer 1

你可以尝试这个，它通过提供工作文件的相对路径来为我工作：

const worker = new Worker("./worker3.js") // Unexpected token '<' (at worker3.js:1:1) 
const worker = new Worker("src/components/web-worker/worker3.js") // works

或者您可以通过将工作脚本导出为 Blob 来导入它

参考：https://codesandbox.io/p/sandbox/web-worker-reactjs-2sswe?file=%2Fsrc%2Fworker.js