为何React应用中的Web Worker文件必须放在public目录？

在React应用中使用Web Worker时，若遇到以下错误：

Uncaught SyntaxError: Unexpected token '<' (at worker.js:1:1)

将worker.js移至项目的public目录即可解决问题，具体原因如下：

1. React项目的资源处理逻辑差异 #

React项目（基于Webpack/Vite等构建工具）对src和public目录的处理规则完全不同：

• src目录下的文件会被构建工具解析、编译、打包，最终输出到构建产物的特定路径中，不会保留原文件的路径和文件名映射。
• public目录属于静态资源目录，其中的文件会被服务器原样托管，请求路径直接对应文件在public中的位置，不会经过构建工具的编译处理。

2. 错误的核心原因 #

当worker.js放在src目录时，执行new Worker("worker.js")会让浏览器向当前页面的相对路径发起请求，但此时服务器找不到对应路径的静态文件（src下的文件已被构建工具处理，原路径不存在），会返回React应用的入口index.html文件。而HTML文件的第一个字符是<，Worker尝试将其当作JS解析时，就会触发Unexpected token '<'的语法错误。

3. 移至public目录的作用 #

将worker.js放到public目录后，浏览器请求worker.js时，服务器会直接返回该文件的原始JS内容，Worker可以正确解析执行，自然不会再出现语法错误。

相关代码示例 #

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");

效果对比 #

• 有效情况：
  
• 无效情况（触发错误）：

Uncaught SyntaxError: Unexpected token '<' (at worker.js:1:1)

内容的提问来源于stack exchange，提问作者Petar Todorov