在 Web Worker 中使用 ES 模块需三者对齐:加载时必须传入 { type: 'module' },脚本须符合 ESM 规范(支持顶层 await、import.meta.url,禁用裸模块名),构建工具需适配(Vite 开箱即用,Webpack 需配置,Rollup/esbuild 需插件或 Blob)。

要在 Web Worker 中使用 ES 模块,关键不是改写逻辑,而是让加载方式、脚本内容和构建环境三者对齐。核心动作只有一条:创建 Worker 时必须显式传入 { type: 'module' },否则即使脚本里写了 import 也会报错。
主线程创建必须带 type: 'module'
不能省略配置,也不能依赖默认行为:
- ✅ 正确写法:
new Worker(new URL('./worker.js', import.meta.url), { type: 'module' }) - ❌ 错误写法:
new Worker('./worker.js')(默认是 classic 模式,不识别import) - 路径必须是同源 URL,推荐用
new URL()构造,避免硬编码失效 - 脚本文件名需带
.js后缀,如worker.js,不能省略
Worker 脚本本身要符合 ESM 规范
模块化 Worker 不是“支持 import”,而是整个脚本按 ES 模块语义执行:
将后端 Java 接口文档转换为前端 TypeScript 类型定义(interface / type)。输入:飞书文档、Spring Boot 接口文档、Swagger/OpenAPI、手写 API 文档等。输出:包含请求参数与响应结果的 .md 文件,含完整 JSDoc 注释。触发关键词:Java 转 TS、接口转换、生成前端类型、接口文档转 TypeScript、DTO/VO/BO 转 interface、后端文档转前端类型、生成接口类型、类型定义生成。
- 可自由使用
import和export,包括顶层await(Chrome 89+、Firefox 86+、Safari 16.4+) - 所有
import必须在顶层作用域,不能放在函数或条件块里 - 支持
import.meta.url,可用于动态构造模块路径,例如:await import(new URL('./utils.js', import.meta.url)) - 不支持裸模块名(如
import _ from 'lodash'),除非构建工具做了重写或别名处理
不同构建工具的适配要点
工程化项目中,路径解析和打包逻辑会影响模块 Worker 是否能正常加载:
立即学习“Java免费学习笔记(深入)”;
-
Vite:开箱即用,
new Worker(new URL('./worker.js', import.meta.url), { type: 'module' })直接生效 -
Webpack:需启用
worker-loader或在 Webpack 5+ 中配置type: 'module';建议 Worker 文件后缀为.worker.js,便于规则匹配 -
Rollup / esbuild:不原生支持 Worker 打包,轻量场景可用 Blob URL 动态生成模块,或借助插件如
@rollup/plugin-worker
通信机制不变,仍靠 postMessage
ES 模块不改变线程间通信模型,主线程与 Worker 依然通过消息传递交换数据:
- 主线程发送:
worker.postMessage({ cmd: 'process', data: arrayBuffer }) - Worker 接收:
self.addEventListener('message', e => { ... }) - Worker 返回:
self.postMessage(result),结构化克隆自动处理,大对象可配合transfer参数实现零拷贝 - Worker 内无法访问
window、document,但self是全局对象,等价于globalThis

















