如何在位于public目录的Web Worker中导入外部模块？

基础代码 #

App.js #

export default function App() {
  const worker = new Worker("Worker.js");

  worker.onmessage = (e) => {
    console.log(e.data);
  };

  function getCount() {
    worker.postMessage("get count");
  }
  return (
    <div className="App">
      <button onClick={getCount}>Get count!</button>
    </div>
  );
}

Worker.js #

class counter {
  constructor() {
    this.value = Math.floor(Math.random() * 100);
  }
}

onmessage = (e) => {
  const myCounter = new counter();
  this.postMessage(myCounter.value);
};

文件结构 #

root
-src
--utility1.js
--class1.js
-public
--Worker.js

可行解决方案 #

方案1：使用ES模块类型的Web Worker #

现代浏览器支持以ES模块方式加载Worker，步骤如下：

1. 修改App.js中Worker的创建代码，添加模块类型参数：

const worker = new Worker("/Worker.js", { type: "module" });

2. 在public/Worker.js中使用相对路径导入src目录的文件：

import { someUtil } from '../src/utility1.js';
import { Class1 } from '../src/class1.js';

class counter {
  constructor() {
    this.value = Math.floor(Math.random() * 100);
  }
}

onmessage = (e) => {
  const myCounter = new counter();
  // 可直接使用导入的工具函数或类
  this.postMessage(myCounter.value);
};

注意：需确保浏览器支持ES模块Worker，同时如果使用React等构建工具，可能需要额外配置以保证跨目录导入的路径能被正确解析。

方案2：通过构建工具统一处理Worker与依赖 #

这是最可靠的方案，适合使用Webpack、Vite等构建工具的项目：

1. 将public/Worker.js移到src目录下，修改App.js的Worker创建逻辑：

// 导入Worker文件，构建工具会自动打包处理
import Worker from './Worker.js?worker';
const worker = new Worker();

2. 在src/Worker.js中直接导入同目录的工具类：

import { someUtil } from './utility1.js';
import { Class1 } from './class1.js';

class counter {
  constructor() {
    this.value = Math.floor(Math.random() * 100);
  }
}

onmessage = (e) => {
  const myCounter = new counter();
  this.postMessage(myCounter.value);
};

构建工具会自动将Worker及其依赖打包为独立文件，无需担心路径兼容问题。

方案3：使用importScripts（兼容旧浏览器） #

如果需要兼容不支持ES模块的旧环境，可按以下步骤操作：

1. 将src/utility1.js和src/class1.js打包为独立的脚本文件（如utils.bundle.js），放入public目录。
2. 在public/Worker.js中通过importScripts导入：

importScripts('./utils.bundle.js');

onmessage = (e) => {
  const myCounter = new counter();
  this.postMessage(myCounter.value);
};

该方案需手动处理打包，灵活性较低，仅适合旧环境兼容场景。

内容的提问来源于stack exchange，提问作者713sean