动态加载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
相关产品推荐
相关产品推荐

