怎样为 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 错误信息