怎样为 Web Worker 编写模块化脚本
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）等 API -
通信是唯一桥梁：模块间共享状态不可行；所有数据必须通过
postMessage()传递，支持结构化克隆（含 ArrayBuffer、TypedArray），但不支持函数、DOM 节点、循环引用 -
错误需显式捕获：Worker 内未捕获的异常不会冒泡到主线程，建议在顶层加
self.onerror = ...并主动postMessage错误信息
