You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
3.0 KiB
97 lines
3.0 KiB
# rollup-plugin-off-main-thread |
|
|
|
Use Rollup with workers and ES6 modules _today_. |
|
|
|
``` |
|
$ npm install --save @surma/rollup-plugin-off-main-thread |
|
``` |
|
|
|
Workers are JavaScript’s version of threads. [Workers are important to use][when workers] as the main thread is already overloaded, especially on slower or older devices. |
|
|
|
This plugin takes care of shimming module support in workers and allows you to use `new Worker()`. |
|
|
|
OMT is the result of merging loadz0r and workz0r. |
|
|
|
## Usage |
|
|
|
I set up [a gist] to show a full setup with OMT. |
|
|
|
### Config |
|
|
|
```js |
|
// rollup.config.js |
|
import OMT from "@surma/rollup-plugin-off-main-thread"; |
|
|
|
export default { |
|
input: ["src/main.js"], |
|
output: { |
|
dir: "dist", |
|
// You _must_ use either “amd” or “esm” as your format. |
|
// But note that only very few browsers have native support for |
|
// modules in workers. |
|
format: "amd" |
|
}, |
|
plugins: [OMT()] |
|
}; |
|
``` |
|
|
|
### Auto bundling |
|
|
|
In your project's code use a module-relative path via `new URL` to include a Worker: |
|
|
|
```js |
|
const worker = new Worker(new URL("worker.js", import.meta.url), { |
|
type: "module" |
|
}); |
|
``` |
|
|
|
This will just work. |
|
|
|
If required, the plugin also supports plain literal paths: |
|
|
|
```js |
|
const worker = new Worker("./worker.js", { type: "module" }); |
|
``` |
|
|
|
However, those are less portable: in Rollup they would result in module-relative |
|
path, but if used directly in the browser, they'll be relative to the document |
|
URL instead. |
|
|
|
Hence, they're deprecated and `new URL` pattern is encouraged instead for portability. |
|
|
|
### Importing workers as URLs |
|
|
|
If your worker constructor doesn't match `workerRegexp` (see options below), you might find it easier to import the worker as a URL. In your project's code: |
|
|
|
```js |
|
import workerURL from "omt:./worker.js"; |
|
import paintWorkletURL from "omt:./paint-worklet.js"; |
|
|
|
const worker = new Worker(workerURL, { name: "main-worker" }); |
|
CSS.paintWorklet.addModule(paintWorkletURL); |
|
``` |
|
|
|
`./worker.js` and `./paint-worklet.js` will be added to the output as chunks. |
|
|
|
## Options |
|
|
|
```js |
|
{ |
|
// ... |
|
plugins: [OMT(options)]; |
|
} |
|
``` |
|
|
|
- `loader`: A string containing the EJS template for the amd loader. If `undefined`, OMT will use `loader.ejs`. |
|
- `useEval`: Use `fetch()` + `eval()` to load dependencies instead of `<script>` tags and `importScripts()`. _This is not CSP compliant, but is required if you want to use dynamic imports in ServiceWorker_. |
|
- `workerRegexp`: A RegExp to find `new Workers()` calls. The second capture group _must_ capture the provided file name without the quotes. |
|
- `amdFunctionName`: Function name to use instead of AMD’s `define`. |
|
- `prependLoader`: A function that determines whether the loader code should be prepended to a certain chunk. Should return true if the load is suppsoed to be prepended. |
|
- `urlLoaderScheme`: Scheme to use when importing workers as URLs. If `undefined`, OMT will use `"omt"`. |
|
|
|
[when workers]: https://dassur.ma/things/when-workers |
|
[a gist]: https://gist.github.com/surma/a02db7b53eb3e7870bf539b906ff6ff6 |
|
|
|
--- |
|
|
|
License Apache-2.0
|
|
|