javascript - ¿Cómo puedo empaquetar un WebWorker para usarlo en una biblioteca portátil?
Tengo un paquete de biblioteca que proporciona algunos hooks que, a su vez, realizan algunos cálculos costosos en hilos 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 de fancy-pants, la aplicación Demo funciona correctamente. Webpack compila el worker fancy-pants/worker/fancy.ts a fancy-pants/dist/src_worker_fancy.worker.js, donde está disponible para el código new Worker(new URL('../worker/fancy.ts', import.meta.url)); (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 el hook useFancyPants funcione desde un paquete diferente, es decir, example/App.tsx? Es decir, cuando importo y uso useFancyPants dentro de mi aplicación example, ¿cómo se empaqueta y luego se comunica con un hilo worker? Idealmente, preferiría no tener que compilar y guardar manualmente el worker de fancy-pants en example/public, aunque supongo que esa 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 importable y utilizable desde cualquier lugar.)