web-worker - 从 Quasar Framework 的 assets 目录加载一个 web worker

Question

在 Quasar 应用程序中，从“assets/subdir/myfile.js”中，我尝试加载“assets/subdir/query.js”作为网络 worker 。我首先尝试了一个简单的相对路径:

const myWorker = new Worker('./query.js')

然后使用 ~assets 建议 in the docs :

const myWorker = new Worker('~assets/subdir/query.js')

两者都失败了(在 quasar dev 模式下)并在浏览器日志中提示无法从 http://127.0.0.1:8080/ 加载该文件

真正起作用的是将它移动到 Quasar 的“statics”目录中:

const myWorker = new Worker('statics/query.js')

由于一些原因(没有 linting、编辑时没有自动重新加载、源代码在意想不到的地方等)，这并不理想。

有没有办法将 web worker 源文件保存在 Assets 下，而不是静态的？

Answer 1

我最近发现了一个解决方案:使用 worker-plugin

使用 yarn add worker-plugin --dev，然后在 quasar.conf.js 的顶部执行:

const WorkerPlugin = require('worker-plugin')

然后在 build:{...} 部分添加:

extendWebpack (cfg) {
   cfg.plugins.push(new WorkerPlugin())
}

我还有:

chainWebpack (chain) {
   ...
   chain.output.set('globalObject', 'this') 
},

但我不确定是否需要这样做。

您必须在源代码中进行的唯一更改是添加 , { type: 'module' }:

const worker = new Worker('./foo.js', { type: 'module' });