如何在Web Worker中导入jimp、moment等模块并解决导入报错问题

通用报错排查 #

你遇到的三类报错分别对应配置项缺失、导入语法不兼容、模块类型未声明三个问题，按你使用的场景对应调整即可：

场景1：无构建工具、原生调用Web Worker #

• 初始化Worker时必须显式指定模块类型，否则浏览器默认按普通脚本解析，不支持import语法

  // 主线程代码
  const worker = new Worker('./myWorker.worker.js', { type: 'module' })
  

• Worker文件内直接导入第三方库的UMD/ES模块版本即可，可使用本地静态资源或者公网CDN资源

  // myWorker.worker.js 代码
  // 导入本地存放的依赖或者公网CDN资源
  import moment from './lib/moment.min.js'
  import Jimp from './lib/jimp.min.js'
  
  // 正常业务逻辑
  self.onmessage = (e) => {
    const formatTime = moment().format('YYYY-MM-DD HH:mm:ss')
    self.postMessage(formatTime)
  }
  

• 如使用importScripts导入，只能导入UMD格式的第三方包，不支持ES模块。

场景2：Webpack 5 构建项目 #

• 不需要额外安装web-worker第三方包，使用Webpack原生支持的导入语法即可，可规避默认导出缺失报错

  // 主线程代码
  const worker = new Worker(new URL('./myWorker.worker.js', import.meta.url))
  

• 如使用Webpack 4及以下版本，安装worker-loader后在配置文件新增规则：

  // webpack.config.js
  module.exports = {
    module: {
      rules: [
        {
          test: /\.worker\.js$/,
          use: 'worker-loader'
        }
      ]
    }
  }
  

• Worker文件内直接正常导入通过npm安装的moment、jimp等依赖即可，Webpack会自动处理依赖打包。

场景3：Vite 构建项目 #

• Vite原生支持Web Worker，无需额外配置loader，使用带?worker后缀的导入语法即可：

  // 主线程代码
  import MyWorker from './myWorker.worker.js?worker'
  const worker = new MyWorker()
  

• Worker文件内直接正常导入npm安装的依赖即可，Vite会自动打包Worker相关的依赖资源，不会出现缺失打包文件的问题。
• 如仍有导入报错，检查vite.config.js中的include/exclude规则未过滤Worker文件即可。

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