Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

217
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda