esbuild-plugin-string-worker

esbuild-plugin-string-worker

This is a plugin for esbuild which allows you to import .worker.js files to get the constructor for a Web Worker, similar to worker-loader for Webpack.

yarn add esbuild-plugin-string-worker

Example:

// example.worker.js
postMessage("hello from worker!");

// example.js
import Worker from "./example.worker.js";

const blob = new Blob([Worker], { type: "text/javascript" });
const worker = new Worker(URL.createObjectURL(blob));

worker.onmessage = ({ data }) => console.log(data);

Usage

import { build } from "esbuild";
import inlineWorkerPlugin from "esbuild-plugin-string-worker";

build({
  /* ... */
  plugins: [inlineWorkerPlugin()],
});

Build configuration

Optionally, you can pass a configuration object which has the same interface as esbuild's build API, which determines how the worker code is bundled:

inlineWorkerPlugin(extraConfig);

This is how your custom config is used internally:

if (extraConfig) {
  delete extraConfig.entryPoints;
  delete extraConfig.outfile;
  delete extraConfig.outdir;
}

await esbuild.build({
  entryPoints: [workerPath],
  bundle: true,
  minify: true,
  outfile: bundlePath,
  target: "es2017",
  format: "esm",
  ...extraConfig, // <-- your config can override almost everything
});