Web Worker导入含ES模块的文件时报import语法错误如何解决

报错本质是importScripts加载的脚本默认运行在普通脚本模式，不支持ES模块的import语法，因此utils.js中的导入语句会触发语法错误。

方案1：使用Webpack 5原生Worker打包能力（最适配当前环境） #

你使用的Webpack 5已经原生支持Web Worker的依赖打包，不需要额外loader，操作步骤如下：

• 改造Worker入口文件（my.worker.js），放弃importScripts写法，直接用ES import引入所有依赖：

// my.worker.js 完整示例
import * as utils from './utils.js'
import * as nn from './nn.js'

// 原有Worker逻辑不变
self.onmessage = (e) => {
  // 处理业务逻辑
  const result = utils.xxx(e.data)
  self.postMessage(result)
}

• 主线程初始化Worker时使用如下写法，不需要加type: module配置：

const myWorker = new Worker(new URL('./my.worker.js', import.meta.url))
// postMessage可正常使用
myWorker.postMessage(/* 传递给Worker的参数 */)
myWorker.onmessage = (e) => { /* 接收返回结果 */ }

• 无需修改package.json的"type": "module"配置，Webpack会自动把Worker及其所有依赖打包为兼容普通Worker模式的单文件，所有ES模块语法都会被转译为普通JS代码，兼容全平台浏览器，也不会影响原有项目的编译逻辑。

方案2：预打包依赖为IIFE格式 #

如果一定要保留importScripts写法，可先把包含ES导入的依赖文件打包为无import语句的IIFE格式：

• 用esbuild单独打包utils.js：
  esbuild ./utils.js --bundle --format=iife --global-name=Utils --outfile=./utils.iife.js
• 打包后的utils.iife.js可直接用importScripts加载，加载后可通过全局变量Utils调用原有暴露的方法。

内容的提问来源于stack exchange，提问作者Emissary