模块化 Worker 的关键在于路径、构建工具与运行时三者对齐：需显式传入 { type: 'module' }，路径须带 .js 后缀；Vite 开箱即用，Webpack 需配置 type: 'module' 或 worker-loader，Rollup/esbuild 建议 Blob URL 或插件；Worker 内 import 遵守 ESM 规则，作用域隔离，仅支持同源或 CORS 脚本，禁用 Node.js 模块。
在模块化项目中加载专用 Worker，关键不是“能不能用”，而是“怎么让模块路径、构建工具和运行时三者对齐”。现代前端工程（如 Vite、Webpack、Rollup）都支持模块化 Worker，但写法和配置有差异。
确保 Worker 脚本以模块方式启动
主线程创建 Worker 时必须显式传入 { type: 'module' }，否则即使脚本里写了 import 也会报错：
- ✅ 正确：
new Worker('./worker.js', { type: 'module' }) - ❌ 错误：
new Worker('./worker.js')（默认 classic 模式，不识别 import）
注意：路径必须是相对或绝对 URL，且 .js 后缀不可省略；不能写 import './utils'，得写 import './utils.js'。
适配主流构建工具
不同工具对模块 Worker 的支持程度不同，需按需配置：
立即学习“Java免费学习笔记（深入）”；
-
Vite：开箱即用，无需额外插件。直接
new Worker(new URL('./worker.js', import.meta.url), { type: 'module' })即可，Vite 会自动解析并处理模块依赖 -
Webpack：需启用
worker-loader或使用 Webpack 5+ 内置的type: 'module'支持。推荐在webpack.config.js中设置output.libraryType: 'module'，并确保 Worker 文件后缀为.worker.js（便于规则匹配） -
Rollup / esbuild：不原生支持 Worker 打包，建议用
Blob URL或data URL动态生成模块 Worker（适合轻量场景），或配合插件如@rollup/plugin-worker
Worker 内部模块导入规范
模块化 Worker 脚本（如 worker.js）中可自由使用 import，但要遵守 ESM 规则：
- 所有
import必须在顶层作用域，不能放在函数或条件语句里 - 支持
import.meta.url构造动态路径，例如：const utils = await import(new URL('./utils.js', import.meta.url)) - 不支持裸模块名（如
import _ from 'lodash'），除非构建工具做了别名重写或通过插件注入 - 模块作用域完全隔离——Worker 里
import的东西，主线程访问不到；通信仍靠postMessage()和onmessage
避免常见路径与环境陷阱
模块 Worker 对运行环境更敏感，几个易踩坑点：
- 必须运行在 HTTP/HTTPS 环境（
localhost可行，file://协议会失败） - Worker 脚本及其依赖必须同源，或服务端开启 CORS（尤其用
importScripts加载跨域脚本时） - 不要在 Worker 里
importNode.js 内置模块（如fs、path），浏览器环境无此能力 - 调试时注意 DevTools 的 “Workers” 标签页，可单独查看 Worker 控制台和断点
