Rollup-plugin-webworker NPM

rollup-plugin-webworker

🍣 A Rollup plugin to handler webworker.

Requirements

This plugin requires an LTS Node version (v14.0.0+) and Rollup v3.0.0+.

Install

Using pnpm:

pnpm add rollup-plugin-webworker -D

Usage

Rollup Config

import { defineConfig } from "rollup";
import webworker from "rollup-plugin-webworker";
// change ts plugin
import typescript from "rollup-plugin-typescript2";

export default defineConfig({
  /* ... */
  plugins: [
    worker({
      useTerser: true,
      useTs: true,
      tsPlugin: typescript(),
    }),
  ],
});

Worker Code

// fib-worker.ts
self.onmessage = (e) => {
  const num = Number(e.data);
  const result = fib(num);

  self.postMessage(result);
};

function fib(n: number): number {
  if (n === 0) {
    return 0;
  }
  if (n === 1 || n === 2) {
    return 1;
  }

  return fib(n - 1) + fib(n - 2);
}

Main Code

// main.ts
import createWorker from "./fib-worker?worker";

const worker = createWorker();

function fibonacciInWorker(n: number): Promise<number> {
  const promise = new Promise<number>((resolve) => {
    worker.onmessage = (event) => {
      resolve(event.data);
    };
  });

  worker.postMessage(n);

  return promise;
}

export { fibonacciInWorker };

Options

`inline`

Type: boolean Default: true

If false, will output worker file, default at dist.

`out`

Type: string Default: dist

Output path of worker file.

Take effect when inline is false.

`filter`

Type: RegExp Default: /\?worker$/

The RegExp to match worker file.

`useTerser`

Type: boolean Default: true

Whether to use @rollup/plugin-terser to minify code.

`useTs`

Type: boolean Default: true

Whether to use @rollup/plugin-typescript.

`useNodeResolve`

Type: boolean Default: false

Whether to use @rollup/plugin-node-resolve.

`useJson`

Type: boolean Default: false

Whether to use @rollup/plugin-json.

`keepImportName`

Type: boolean Default: false

Whether to remove the mark of web worker file.

`plugins`

Type: Array<Plugin> Default: []

Add plugins to handler worker code.

@rollup/plugin-commonjs is built in. @rollup/plugin-terser will be used when useTerser is true. @rollup/plugin-typescript will be used when useTs is true. @rollup/plugin-node-resolve will be used when useNodeResolve is true. @rollup/plugin-json will be used when useJson is true.