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.

In most cases you don't need to use this option.

commonjsPlugin

Type: Plugin Default: @rollup/plugin-commonjs

You can use commonjsPlugin to change default commonjs plugin.

terserPlugin

Type: Plugin Default: @rollup/plugin-terser

Take effect when useTerser is true.

You can use terserPlugin to change default terser plugin.

tsPlugin

Type: Plugin Default: @rollup/plugin-typescript

Take effect when useTs is true.

You can use tsPlugin to change default typescript plugin.

nodeResolvePlugin

Type: Plugin Default: @rollup/plugin-node-resolve

Take effect when useNodeResolve is true.

You can use nodeResolvePlugin to change default node-resolve plugin.

jsonPlugin

Type: Plugin Default: @rollup/plugin-json

Take effect when useJson is true.

You can use jsonPlugin to change default json plugin.