11# rollup-plugin-web-worker-loader
22
3- Rollup plugin to handle Web Workers.
3+ Rollup plugin to handle Web Workers, Service Workers, Shared Workers,
4+ Audio Worklets, and Paint Worklets. Support for Animation Worklets and
5+ Layout Worklets is in consideration for when implementations are available
6+ in browsers.
7+
8+ Web Workers are available in Node JS as well as in browsers. All the other
9+ worklets and workers are available in browsers only, and will throw a runtime
10+ error if used in Node JS.
411
512Can inline the worker code or emit a script file using code-splitting.
613Handles Worker dependencies and can emit source maps.
@@ -27,6 +34,8 @@ export default {
2734};
2835```
2936
37+ #### Web Worker Example
38+
3039Bundle the worker code using the RegEx pattern specified in the plugin's configuration.
3140By default you can add the prefix ` web-worker: ` to your imports:
3241
@@ -38,6 +47,81 @@ const dataWorker = new DataWorker();
3847dataWorker .postMessage (' Hello World!' );
3948```
4049
50+ #### Shared Worker Example
51+
52+ ``` javascript
53+ import SharedWorker from ' shared-worker:./SharedWorker' ;
54+
55+ const sharedWorker = new SharedWorker ();
56+ sharedWorker .port .postMessage (' Hello World!' );
57+ ```
58+
59+ #### Service Worker Example
60+
61+ ``` javascript
62+ import ServiceWorker from ' service-worker:./ServiceWorker' ;
63+
64+ ServiceWorker .then (function (registration ) {
65+ console .log (' Registration successful, scope is: ' , registration .scope );
66+ })
67+ .catch (function (error ) {
68+ console .log (' Service worker registration failed, error: ' , error);
69+ }
70+ ` ` `
71+
72+ #### Audio Worklet Example
73+
74+ Audio Worklets require an audio context at instantiation. When you use
75+ rollup-plugin-web-worker-loader in a browser environment, your import will
76+ return a constructor to which you can pass an audio context.
77+ ##### Worklet Processor
78+
79+ ` ` ` javascript
80+ class MyAudioWorkletProcessor extends AudioWorkletProcessor {
81+ }
82+
83+ registerProcessor (" my-audio-worklet" , MyAudioWorkletProcessor);
84+ ` ` `
85+
86+ ##### Worklet Consumer
87+
88+ ` ` ` javascript
89+ import registerMyAudioWorklet from ' audio-worklet:./MyAudioWorkletFactory' ;
90+
91+ const audioContext = new AudioContext ();
92+ registerMyAudioWorklet (audioContext);
93+
94+ class MyAudioWorklet extends AudioWorkletNode {
95+ constructor (audioContext ) {
96+ super (audioContext, " my-audio-worklet" ));
97+ }
98+ }
99+ ` ` `
100+
101+ #### Paint Worklet Example
102+
103+ ##### Worklet Processor
104+
105+ ` ` ` javascript
106+ class MyPaintWorklet {
107+ ...
108+ }
109+
110+ registerPaint (' my-paint-worklet' , MyPaintWorklet);
111+ ` ` `
112+
113+ ##### Worklet Consumer
114+
115+ ` ` ` javascript
116+ import registerMyPaintWorklet from ' paint-worklet:./MyPaintWorkletFactory' ;
117+ registerMyPaintWorklet ();
118+ ` ` `
119+
120+ ` ` ` css
121+ html {
122+ background: paint (my- paint- worklet);
123+ }
124+
41125### Configuration
42126The plugin responds to the following configuration options:
43127` ` ` javascript
@@ -49,9 +133,26 @@ webWorkerLoader({
49133 // 'auto' detectes the target platform and selects between 'browser` and ' node' .
50134 // Default: 'auto'
51135
52- pattern ?: RegEx, // A RegEx instance describing the pattern that matches the files to import as
136+ web - worker ?: RegEx, // A RegEx instance describing the pattern that matches the files to import as
53137 // web workers. If capturing groups are present, the plugin uses the contents of the
54138 // last capturing group as the path to the worker script. Default: /web-worker:(.+)/
139+
140+ shared- worker?: RegEx, // A RegEx instance describing the pattern that matches the files to import as
141+ // shared workers. If capturing groups are present, the plugin uses the contents of the
142+ // last capturing group as the path to the worker script. Default: /shared-worker:(.+)/
143+
144+ service- worker?: RegEx, // A RegEx instance describing the pattern that matches the files to import as
145+ // service workers. If capturing groups are present, the plugin uses the contents of the
146+ // last capturing group as the path to the worker script. Default: /service-worker:(.+)/
147+
148+ audio- worklet?: RegEx, // A RegEx instance describing the pattern that matches the files to import as
149+ // audio worklets. If capturing groups are present, the plugin uses the contents of the
150+ // last capturing group as the path to the worker script. Default: /audio-worklet:(.+)/
151+
152+ paint- worklet?: RegEx, // A RegEx instance describing the pattern that matches the files to import as
153+ // paint worklets. If capturing groups are present, the plugin uses the contents of the
154+ // last capturing group as the path to the worker script. Default: /paint-worklet:(.+)/
155+
55156
56157 extensions?: string[], // An array of strings to use as extensions when resolving worker files.
57158 // Default: ['.js']
0 commit comments