Simple Worker Vite

Appearance

On this page

Vite Plugin ​

The vite plugin is used to compile the worker modules into separate files that can be utilized in your project.

Usage ​

The plugin needs to be added to the vite.config.js or vite.config.ts file.

ts
import { defineConfig } from "vite";
import { simpleWorkerPlugin } from "simple-worker-vite/plugin"; 

export default defineConfig({
	plugins: [
		simpleWorkerPlugin({ 
			// ... 
		}), 
	],
});

TIP

It will not just bundle the worker module into one file (if they are importing other modules), but will also transpile the worker from TypeScript to JavaScript (if needed).

After building the project the worker files will be in the dist/workers/ directory (by default).

bash
dist
├── index.html
├── assets
│   └── index.1234.js
├── workers 
│   ├── my-worker-name.worker.js 
│   └── yet-another-worker.worker.js

Options ​

The simpleWorkerPlugin function takes an options object with the following properties:

publicPath ​

The (optional) publicPath option is used to specify the path where the worker files will be located when they are built.

INFO

By default it is set to "workers/" which means the worker files will be located in the dist/workers/ directory.

ts
simpleWorkerPlugin({
	publicPath: "custom-path/", 
	// ...
}),

WARNING

Please note that if you change the publicPath option you will also need to change the base of the WorkerStore if you are using it.

minify ​

The (optional) minify option is used to specify if the worker files should be minified or not.

INFO

By default it is set to true which means the worker files will be minified.

ts
simpleWorkerPlugin({
	minify: false, 
	// ...
}),

workers ​

The mandatory workers option is used to specify the workers that should be compiled.
They always contain a name and a srcPath property.

INFO

The name property is used to specify the name of the worker. This is used as the identifier when spawning a worker using the WorkerStore.

ts
simpleWorkerPlugin({
	workers: [ 
		{ 
			name: "my-worker-name", 
			srcPath: "src/workers/my-worker-name.worker.ts", 
		}, 
		{ 
			name: "yet-another-worker", 
			srcPath: "src/workers/yet-another-worker.worker.ts", 
		}, 
	], 
	// ...
}),

Utilities ​

The plugin also exports some utilities.

workersFromDir ​

The workersFromDir function can be used to automatically extract the workers from a directory.

ts
import { defineConfig } from "vite";
import { simpleWorkerPlugin, workersFromDir } from "simple-worker-vite/plugin"; 

export default defineConfig({
	plugins: [
		simpleWorkerPlugin({
			workers: workersFromDir("src/workers/"), 
			// ...
		}),
	],
});

INFO

It will search the directory for any files ending in .worker.ts or .worker.js and use their name as the name property.

workerFromFile ​

The workerFromFile function works in a similar way and uses the file name as the name property.

ts
import { defineConfig } from "vite";
import { simpleWorkerPlugin, workerFromFile } from "simple-worker-vite/plugin"; 

export default defineConfig({
	plugins: [
		simpleWorkerPlugin({
			workers: [ 
				workerFromFile("src/workers/my-worker-name.worker.ts"), 
				workerFromFile("src/workers/yet-another-worker.worker.ts"), 
			], 
			// ...
		}),
	],
});

INFO

This gives you more control what files are used as workers. It will also work with files that do not end in .worker.ts or .worker.js.

Last updated: