Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

211
Vistas
How can I package a WebWorker for use in a portable library?

I have a library package that provides some hooks which in turn do some expensive calculation on worker threads:

// example/App.tsx

import {useFancyPants} from '@fancy-pants/hooks';

  ...
  useFancyPants("kittens"); // Help! I need to call a worker thread
  ...
// fancy-pants/src/hooks.ts

export function useFancyPants() {
   const worker = new Worker(new URL('../worker/fancy.ts', import.meta.url));
   worker.sendMessage(...);
   worker.onMessage(...);
}
// fancy-pants/src/worker/fancy.ts

self.onMessage(...);
// fancy-pants/src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom';

import Demo from './Demo';

ReactDOM.render(<Demo />, document.getElementById('root'));
// fancy-pants/src/Demo.tsx
Demo.tsx

import {useFancyPants} from './hooks'

  ...
  useFancyPants("rainbows")
  ...
// fancy-pants/webpack.config.js

const path = require("path")

module.exports = {
    entry: "./src/Demo.tsx",
    output: {
        filename: "fancy.js",
        path: path.join(__dirname, "./dist/"),
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js"],
        modules: ["node_modules"]
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ["babel-loader"],
            },
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                use: ["ts-loader"],
            },
        ],
    },
}

Inside fancy-pants, the Demo app works correctly. Webpack compiles the worker fancy-pants/worker/fancy.ts to fancy-pants/dist/src_worker_fancy.worker.js, where it's available to the new Worker(new URL('../worker/fancy.ts', import.meta.url)); code (even though it's not in the fancy-pants/public/ folder ... this is a deeper magic I don't understand). There's a bit more config required to wire all this together but I'm trying to keep this example as simple as possible.

What is the best way to make the useFancyPants hook work from a different package, i.e. example/App.tsx? I.e., when I import and use useFancyPants inside my example app, how does it bundle and then talk to a worker thread? Ideally I would prefer not to have to manually compile and save the fancy-pants worker to example/public, though I suppose that's an option. (Note that I'm in a monorepo, if that helps, though ideally I would like fancy-pants to be a package importable and usable from anywhere.)

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda