Can web workers have access to classes defined in Vue application?

Question

I’m building an application that uses Vue for our front-end, specifically Vue 3 Composition API + Typescript. I need the ability to use web workers for long running processes in the background. I was able to get a vanillajs web worker to run alongside the Vue application no problem. My issue is that I need my web worker to have access to classes and functions that are written inside the Vue app. Both my web worker and my Vue app need to use the same classes and functions and I don’t want to have to write them in two places. Is there a way to share them? Any help is appreciated.

Answer 1

I was able to figure out a solution using esbuild. I added a process to my npm run serve and npm run build commands so it runs node ./esbuild.js before the vue-cli commands. This compiles my typescript web worker to javascript and puts it in the public folder before compiling the Vue app. Now I can create a web worker like normal using:

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

And here is my esbuild.js file:

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))