Web Worker 使用 ES Module 必须显式指定 { type: 'module' }，否则即使脚本含 import 也会报错；支持静态和动态 import，但依赖需为原生 ESM；主线程 对 Worker 无效，其模块解析独立于 HTML。
Web Worker 中使用 ES Module 需要显式通过 new Worker(..., { type: 'module' }) 创建，不能仅靠脚本内写 import 就生效；HTML 中的 <script type="module"></script> 对 Worker 无效。
Worker 构造函数必须指定 type: 'module'
这是最关键的一步。即使 Worker 脚本本身是标准 ES Module（含 import），若创建时没传 { type: 'module' }，浏览器会以 classic 模式加载，直接报错 “Cannot use import statement outside a module”。
- ✅ 正确写法：
const worker = new Worker('./worker.js', { type: 'module' }); - ❌ 错误写法：
const worker = new Worker('./worker.js'); // 默认 classic，import 失败 - 注意：路径必须是同源的，且支持模块解析（如 .js 文件需返回
Content-Type: application/javascript）
Worker 脚本中可直接使用 import
启用 module 模式后，Worker 内部就能像普通模块一样导入依赖，包括本地文件、npm 包（需构建或托管为 ES Module 兼容格式）、甚至相对/绝对 URL（如 CDN 上的 ESM）。
- 支持静态
import：import { debounce } from './utils.js'; - 支持动态
import()（可用于按需加载）：const { parse } = await import('https://cdn.skypack.dev/parsimmon@2.0.0'); - 注意：不能用 Node.js 的
require或 CommonJS 语法；所有依赖必须是原生 ESM 或可通过浏览器解析的格式
HTML 中 script type="module" 与 Worker 无关
页面主线程的 <script type="module"></script> 只影响该 script 标签自身执行环境，它不会让 Worker 自动获得模块能力，也不参与 Worker 的模块解析过程。
立即学习“Java免费学习笔记（深入）”；
- Worker 是独立的 JavaScript 执行上下文，其模块系统与主线程隔离
- Worker 的 import 路径基于自身 URL 解析，不是基于 HTML 页面路径
- 如果 worker.js 在
/js/worker.js，那么import './helper.js'会尝试加载/js/helper.js
常见问题与绕过限制的方法
某些场景下（如依赖未提供 ESM 版本），可能遇到无法直接 import 的情况：
- 用打包工具（如 Vite、Rollup）将依赖转为单个 ESM bundle，再供 Worker 加载
- 通过
Blob URL动态生成模块代码（适合小量逻辑或临时适配）：const code = `export const foo = () => 'hello';`; const blob = new Blob([code], { type: 'application/javascript' }); const url = URL.createObjectURL(blob); const worker = new Worker(url, { type: 'module' }); - 避免在 Worker 中直接 import 非 ESM 的第三方库（如未发布
exports字段的旧版 Lodash），优先选 ESM 原生支持的替代品（如lodash-es）
