首先明确一点，Web Worker 模块化的核心在于利用 ES 模块结合 new URL，实现零配置、可复用的架构，现代构建工具能自动完成打包工作。如果项目需要兼容较老环境，Browserify 或 web-worker 库同样可以胜任。但无论选择哪种方案，有几个关键雷区必须避开：不要操作 DOM API，路径必须使用相对路径，通信只能通过 postMessage——这些是基本底线。
为 Web Worker 编写模块化脚本，本质上就是让 Worker 代码具备可复用、可维护、可测试的结构，同时又要承受浏览器环境的各种限制——例如无法直接 import 普通 ES 模块路径、不能访问 DOM。如今谁还手动拼接脚本？现代做法早已转向构建工具或原生 Module Workers，这才是真正的模块化方案。
使用 ES 模块 + new URL（推荐，零配置主流方案）
这是目前最简便的方法，没有之一。兼容性好、无需额外 loader，Vite、Webpack 5+、Rsbuild、UmiJS 4 等现代构建工具都能直接支持。
- Worker 脚本本身通过
export/import组织逻辑，例如：
// src/worker/calculator.js
export function multiply(a, b) {
return a * b;
}
// src/worker/worker.js
import { multiply } from './calculator.js';
self.onmessage = (e) => {
const { a, b } = e.data;
self.postMessage({ result: multiply(a, b) });
};
- 主线程中使用
new URL(..., import.meta.url)创建 Worker：
// src/index.js
const worker = new Worker(new URL('./worker/worker.js', import.meta.url));
worker.postMessage({ a: 10, b: 20 });
worker.onmessage = (e) => console.log(e.data.result); // 200
- 构建工具会自动将这个 Worker 打包成独立 chunk，模块解析和路径映射全自动处理
- TypeScript、CSS-in-JS、JSON 导入等特性也一并支持，具体取决于构建配置
使用 Browserify 打包 Worker 模块（适合 Node.js 风格开发）
如果你的项目仍然沿用 CommonJS，或者需要兼容较老的构建流程，Browserify 依然可靠——尤其是手中握有大量 require() 代码需要迁移时。
- Worker 文件保持 Node.js 风格的模块写法：
// worker.js
const { processData } = require('./utils');
const { logger } = require('./logger');
self.onmessage = (e) => {
logger('start processing');
const result = processData(e.data);
self.postMessage(result);
};
- 用 Browserify 打包成单文件：
npx browserify worker.js -o dist/worker.bundle.js- 主线程加载打包后的脚本：
new Worker('dist/worker.bundle.js') - 优势：自动解析
require依赖，支持 transform（如 babelify、tsify） - 注意：依赖中绝对不能出现 DOM API 或
window相关对象
使用 web-worker 库统一跨平台模块 Worker
当项目需要在浏览器和 Node.js 之间来回运行（例如 SSR 或测试场景），web-worker 能提供一致的 Module Workers 接口，帮你屏蔽底层差异。
- 安装：
npm install web-worker - Worker 仍使用标准 ES 模块语法，主线程用其封装的 Worker 构造函数：
// main.js
import Worker from 'web-worker';
const url = new URL('./worker.js', import.meta.url);
const worker = new Worker(url);
- Node.js 环境下自动 fallback 到
worker_threads，浏览器下走原生Worker - 支持
{type: 'module'}，无需额外构建步骤（但需要 Node.js ≥12.8） - 适合需要统一测试、CI/CD 多环境验证的工程化项目
关键注意事项与避坑点
无论采用哪种方式，下面这些细节直接决定着你的模块化 Worker 是否稳健：
- 路径必须相对且明确：Worker 内部的
import或importScripts路径不能是绝对 URL（除非同源），也不支持 bare import（例如import _ from 'lodash'），必须依靠构建工具解析或提前打包 - 禁止访问主线程上下文：模块中不能出现
document、window、localStorage，fetch在部分浏览器也存在限制，XMLHttpRequest最好改用fetch - 通信是唯一桥梁：模块之间无法共享状态，所有数据必须通过
postMessage()传递。支持结构化克隆（包含 ArrayBuffer、TypedArray），但不支持函数、DOM 节点、循环引用 - 错误需显式捕获：Worker 内部未捕获的异常不会冒泡到主线程，建议在顶层添加
self.onerror = ...，并主动通过postMessage把错误信息发送出去
