javascript - 在Web Worker中导入经典脚本和模块

Question

我正在尝试与网络 worker 合作，我需要能够动态导入经典脚本和模块脚本。所以我需要做这样的事情:

new Worker("worker1.js", { type: "module" });

在我的 worker 中:

importScripts('/scripts/classic.js');
import('/scripts/module.js').then((module) => {
    // Something
});

问题是似乎不可能在模块工作程序中使用 importScripts，因为我收到以下错误:无法在“WorkerGlobalScope”上执行“importScripts”:模块脚本不支持 importScripts()

是否有解决方案可以完成我想要的操作，或者我被迫在导入经典脚本或导入模块脚本之间进行选择？

Answer 1

事实上，从模块 Worker 中，importScripts() 方法不可用。
确实，当您在模块脚本中时，您的所有依赖项也将遵守 ESM。

但是，令人惊讶的是，您使用的代码实际上可以在经典工作线程中工作。
在那里，动态 import() 方法将可用，以及传统的 importScripts() 方法:

const makeScriptURL = (content) => {
  const blob = new Blob([content], { type: "text/javascript" });
  return URL.createObjectURL(blob);
}

const moduleScriptURL = makeScriptURL(`
  export const foo = "bar";
`);

const defaultScriptURL = makeScriptURL(`
  self.bar = "baz";
`);

const workerURL = makeScriptURL(`
  importScripts("${defaultScriptURL}");
    import("${moduleScriptURL}")
      .then(({foo}) => postMessage({foo, bar}))
      .catch((err) => postMessage(err.message));
`);

const worker = new Worker(workerURL);
worker.onmessage = ({data}) => console.log(data);
worker.onerror = (evt) => console.error(evt.message);

但是请注意，经典 Worker 中对动态 import() 的浏览器支持与模块 Worker 支持相同(即还没有 Firefox)。