esbuild-plugin-inline-worker

esbuild-plugin-inline-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-inline-worker

Example:

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

// example.js
import Worker from './example.worker.js';
let worker = Worker();
worker.onmessage = ({data}) => console.log(data);

In this example, worker will be an instance of Worker.

Conveniently, you don't have to take care of having the worker's JavaScript file in the right location on your server. Instead, the JS code for the worker is inlined to the bundle produced by esbuild. This makes this plugin perfect for JS library authors who want to use workers for performance optimization, where the need for a separate worker file is awkward.

The inlined worker code will be created with a separate call to esbuild. That means your worker code can import libraries and use TypeScript or JSX! Supported file extensions for the worker are .worker.js, .worker.ts, .worker.jsx, .worker.tsx.

Usage

import {build} from 'esbuild';
import inlineWorkerPlugin from 'esbuild-plugin-inline-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
});