Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

219
Views
¿Cómo puedo empaquetar un WebWorker para usarlo en una biblioteca portátil?

Tengo un paquete de biblioteca que proporciona algunos ganchos que, a su vez, realizan cálculos costosos en subprocesos de trabajo:

 // 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"], }, ], }, }

Dentro fancy-pants , la aplicación Demo funciona correctamente. Webpack compila el trabajador fancy-pants/worker/fancy.ts en fancy-pants/dist/src_worker_fancy.worker.js , donde está disponible para el new Worker(new URL('../worker/fancy.ts', import.meta.url)); código (aunque no está en la carpeta fancy-pants/public/ ... esta es una magia más profunda que no entiendo). Se requiere un poco más de configuración para conectar todo esto, pero estoy tratando de mantener este ejemplo lo más simple posible.

¿Cuál es la mejor manera de hacer que useFancyPants funcione desde un paquete diferente , por ejemplo, example/App.tsx ? Es decir, cuando importo y uso useFancyPants dentro de mi aplicación de example , ¿cómo se agrupa y luego se comunica con un subproceso de trabajo? Idealmente, preferiría no tener que compilar manualmente y guardar el trabajador fancy-pants en example/public , aunque supongo que es una opción. (Tenga en cuenta que estoy en un monorepo, si eso ayuda, aunque idealmente me gustaría que fancy-pants sea un paquete que se pueda importar y usar desde cualquier lugar).

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!