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

Posted 2023-02-19

【中文标题】从 Quasar Framework 的 assets 目录加载一个 web worker

【英文标题】：Load a web worker from Quasar Framework's assets directory

【发布时间】：2020-06-02 07:31:00

【问题描述】：

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

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 源文件保存在资产下，而不是静态的？

【参考方案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' );