网络工作者可以访问 Vue 应用程序中定义的类吗？答案

【问题标题】：Can web workers have access to classes defined in Vue application?网络工作者可以访问 Vue 应用程序中定义的类吗？
【发布时间】：2022-07-14 05:00:16
【问题描述】：

我正在构建一个使用 Vue 作为前端的应用程序，特别是 Vue 3 Composition API + Typescript。我需要能够在后台使用网络工作者进行长时间运行的进程。我能够让 vanillajs 网络工作者与 Vue 应用程序一起运行，这没问题。我的问题是我需要我的网络工作者能够访问在 Vue 应用程序中编写的类和函数。我的网络工作者和我的 Vue 应用程序都需要使用相同的类和函数，我不想在两个地方编写它们。有没有办法分享它们？任何帮助表示赞赏。

【问题讨论】：

这个问题没有上下文就没有意义。哪些类和函数？无论是否使用 Vue，您都无法从主应用程序访问任何内容。如果需要，可以在主应用程序和辅助应用程序之间共享一些代码。写这篇文章时应该考虑到这一点。

标签： javascript typescript vue.js web-worker

【解决方案1】：

答案是肯定的：

有一种方法可以让网络工作者通过一个 JavaScript 文件访问 Vue.js 框架。

在您的Vue.js 项目中可以帮助您解决此问题的库是vue-worker。这个库使用simple-web-worker 包。（内联网络工作者方法）

您可能知道，标准网络工作者需要一个额外的js 文件，其中包含工作者的代码。对于内联网络工作者，没有必要使用辅助方法。这会将属性注入Vue（并将其传递给每个子组件），默认名称为$worker。总的来说，您可以说它的行为类似于 JavaScript 承诺，但实际上并不是第二个 JavaScript 文件。

现在轮到你了：

有一个非常好的documentation 可以遵循我描述的这种方法，另外还有第二种“老式”方法。试试看:)

【讨论】：

非常感谢您的帮助！我能够使用这种方法让网络工作者运行，但我遇到了问题。我无法将任何变量、函数或类传递给网络工作者。它会抛出一个错误，说它们是未定义的，不幸的是，这是有道理的，因为它处于完全不同的范围内。据我所知，除非您有更多建议，否则使用网络工作者无法完成我需要的工作？
不客气。我真的有另一种方法。您也可以使用 Blob 使您的工作人员内联。看看这个帖子：stackoverflow.com/questions/5408406/… 随意勾选正确的问题，如果它可以解决您的问题！祝你好运！

【解决方案2】：

我能够使用esbuild 找到解决方案。我向我的npm run serve 和npm run build commands 添加了一个进程，因此它在 vue-cli 命令之前运行node ./esbuild.js。这会将我的 typescript web worker 编译为 javascript，并在编译 Vue 应用程序之前将其放在 public 文件夹中。现在我可以像平常一样创建一个网络工作者：

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

这是我的esbuild.js 文件：

const esbuild = require('esbuild')
const { nodeExternalsPlugin } = require('esbuild-node-externals')

const config = {
    entryPoints: ['./src/workers/worker.ts'],
    outfile: 'public/worker.js',
    bundle: true,
    minify: false,
    plugins: [nodeExternalsPlugin()]
}

esbuild.build(config).catch(() => process.exit(1))

【讨论】：