如何在 web worker 中设置 importmap

Question

我可以在 HTML 文件的标签中设置 importmap 类型。但是 web worker 不能设置访问 dom 元素。如何在其中设置 importmap？

Answer 1

我们已经通过 ES 垫片通过一个小旁路完成了该方法（基于 2022 年 11 月 4 日发布的example）。 基本上你启动了一个工作人员，通过 es shims 启用工作人员加载模块并读取这些模块。

我们使用该项目在不可见的 three.js 场景上运行 raycaster，但应该可以正常工作。

workermanager.js:

let worker = new Worker('./workerloader.js');

worker.addEventListener("error", (e) => {
    console.error("the worker died");
    console.error(e);
})

worker.addEventListener("message", function(evt) {
    let result = evt.data;

    if (result === "loaded loader"){
         console.log("loaded the workerloaded");
    } else if (result === "Module worker Loaded")
        worker.postMessage("Init Message");
    else
        console.log(`message from worker: `, evt);
});

workerloader.js

const shimCodeUrl = "https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.wasm.js"

const importMap = {
    "imports": {
        "three":"/whatever_path/three/build/three.module.js",
        "three/":"/whatever_path/three/"
    }
}

postMessage("loaded loader");
importScripts(shimCodeUrl);
importShim.addImportMap(importMap);
importShim("./worker.module.js") /*controllerworker.module.js*/
    .then((res) => {
        console.log("module has been loaded");
    })
    .catch(e => setTimeout(() => { throw e; }));

worker.module.js:

import * as THREE from "three";

class WorkerClass
{
    constructor()
    {
        console.log(new THREE.Vector3(0,1,2));
    }

    onMessage(event)
    {
        console.log(event.data);
    }
}

let workerclass = new WorkerClass();
self.addEventListener("message", evt => workerclass.onMessage(evt));
self.postMessage("Module worker Loaded");