You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

动态加载Web Worker时,如何指定基础路径解析相对导入?

问题背景

我通过基于Blob的URI动态加载多个Web Worker。由于Worker内容需通过模板方案部分生成,因此必须采用该策略(见代码标注(1))。

遇到的问题

Web Worker中包含使用相对路径的import语句,但Worker构造函数不支持指定基础路径,导致相对导入无法解析为绝对引用,最终Worker加载失败且无控制台提示(推测底层为404错误)。

示例说明

资源结构如下:

index.html
/scripts
  /helpers
     helper.x.js
     helper.y.js
  /loader
     loader.js
  /workers
     worker.x.js

在loader.js中实现了动态加载器:

function Loader () {

  function asCode (text) { ... }

  async function load (path) {
    let response = await fetch (path)
    let text     = await response.text ()
    let code     = asCode (text) // (1)
    let blob     = new Blob ([code], { type: 'text/javascript' })
    let url      = URL.createObjectURL(blob)
    let worker   = new Worker (url, { type: 'module' })
    return worker
  }

  return { load }
}

export default Loader ()

worker.x.js中使用相对路径导入两个工具文件,若使用绝对路径则无此问题:

import X from '../helpers/helper.x.js'
import Y from '../helpers/helper.y.js'

X.fx ()
Y.fy ()

最后在index.html中加载Worker:

<body>
   <script type="module">
     import Loader from './scripts/loader/loader.js'
     let WX = Loader.load ('./scripts/workers/worker.x.js')
   </script>
</body>
问题问询

是否存在动态加载Web Worker脚本时,指定用于解析内部相对导入语句的基础路径的方法?我期望Worker构造函数能新增base参数,示例如下:

let WX = new Worker (path, { type: 'module', base: 'the-base-path' })

内容的提问来源于stack exchange,提问作者Javier Vélez

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.19 19:10:24