web worker 支持 es modules 需三者对齐:主线程创建时必须传 { type: 'module' },worker 脚本使用合法 esm 语法(含 .js 后缀、顶层 import),构建工具适配模块路径解析。

要在 Web Worker 中支持 ES Modules,核心是让 Worker 以模块模式启动,并确保整个加载链路(路径、语法、构建工具)符合 ESM 规范。不是加个 import 就能跑通,而是三者必须对齐:运行时识别模块类型、脚本本身写法合规、构建工具不破坏路径和依赖。
主线程创建 Worker 时必须声明 { type: 'module' }
这是最关键的一步。不加这个选项,Worker 默认走 classic 模式,遇到 import 会直接报错“Cannot use import statement outside a module”。
- ✅ 正确写法:
new Worker('./worker.js', { type: 'module' }) - ✅ 推荐写法(Vite 等现代工具中防路径出错):
new Worker(new URL('./worker.js', import.meta.url), { type: 'module' }) - ❌ 错误写法:
new Worker('./worker.js')(classic 模式,不认import) - ⚠️ 注意:路径必须带
.js后缀,不能省略;也不能用裸名如'./worker'
Worker 脚本内部要遵守 ESM 语法规则
模块化 Worker 文件(比如 worker.js)可以写 import,但必须满足静态分析要求,且作用域完全隔离。
DMap GL地图JSAPI(dmapgl)开发指南。用于编写、审查、调试 DMap 地图 API 代码,涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
-
import语句只能出现在顶层,不能在函数、if或try块里 - 所有导入路径必须是字符串字面量,例如
import { calc } from './utils.js'(.js后缀不可少) - 支持
import.meta.url构造动态路径,比如:await import(new URL('./helper.js', import.meta.url)) - 不支持裸模块名(如
import _ from 'lodash'),除非构建工具做了别名或插件注入 - Worker 内
import的内容不会泄漏到主线程,通信仍靠postMessage()和onmessage
不同构建工具的适配要点
浏览器原生支持模块 Worker,但工程化项目离不开构建工具,它们对模块路径和依赖的处理方式不同。
-
Vite:开箱即用,无需额外配置。用
new URL('./worker.js', import.meta.url)即可,Vite 自动解析并打包模块依赖 -
Webpack 5+:需在
webpack.config.js中设置output.libraryType: 'module',并建议 Worker 文件后缀为.worker.js,配合规则匹配 -
Rollup / esbuild:不原生打包 Worker 模块,推荐两种方案:
– 轻量场景:用 Blob URL 动态生成模块 Worker
– 复杂场景:引入插件如@rollup/plugin-worker
替代方案:兼容老环境的 importScripts
如果需要支持不支持 type: 'module' 的旧浏览器,或者快速接入 UMD 脚本(如 Lodash、Moment),可用传统方式:
-
importScripts('./lib/lodash.min.js', './utils.js')—— 同步加载,全局挂载变量 - 它不支持
export/import,也不返回 Promise,但兼容性最强 - 适合临时过渡或嵌入已有全局库,不适合新模块化项目主路径










