web-worker - 使用 Webpack 5 捆绑 Worker 而不启动 Worker

我想使用 Webpack 5 捆绑一个 WebWorker 脚本。给定当前文档的方法是:

const worker = new Worker('./path_to_worker.js', import.meta.url)

但是,我想在我定义它的不同上下文中启动工作者。我想获取工作人员的 url 字符串并实际在其他地方启动它。

const workerUrl = ... get webpack bundled path to worker...


... somewhere else in the code ...
let worker = new Worker(workerUrl)

动态导入可以为 Worker 生成捆绑包,但我无法获取导入脚本的 url,因此我可以在程序执行的稍后时刻将其传递给 worker 构造函数。

我怎么能做到这一点?

回答1

这个可怕的黑客是我目前能想到的最好的方法:

function getWorkerUrl() {

    class FakeWorker {
       constructor(url: string | URL) {}
    }

    let oldWorker = self.Worker

    // override the default Worker class temporarily to prevent the worker from launching
    //@ts-ignore
    self.Worker = FakeWorker

    // this will generate the worker bundle with a specified name 
    let worker = new Worker(new URL("./worker.ts" /* webpackChunkName: 'bundle-worker.js' */, import.meta.url))

    // determine the path to the bundle
    const url = './path_to_js/bundle-worker.js'

    // restore the original Worker api
    self.Worker = oldWorker

    return url
}

相似文章

twilio - DevTools 无法加载源 map

我知道Chrome开发工具中有很多关于这些警告的帖子。对于所有这些,解决方案是关闭通知“启用javascript源maps”和“启用CSS源maps”。我想知道的是如何解决这个问题,以及导致这些警告的...

随机推荐

最新文章