web 3d图形渲染器
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.

83 lines
2.5 KiB

  1. # rollup-plugin-off-main-thread
  2. Use Rollup with workers and ES6 modules _today_.
  3. ```
  4. $ npm install --save @surma/rollup-plugin-off-main-thread
  5. ```
  6. 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.
  7. This plugin takes care of shimming module support in workers and allows you to use `new Worker()`.
  8. OMT is the result of merging loadz0r and workz0r.
  9. ## Usage
  10. I set up [a gist] to show a full setup with OMT.
  11. ### Config
  12. ```js
  13. // rollup.config.js
  14. import OMT from "@surma/rollup-plugin-off-main-thread";
  15. export default {
  16. input: ["src/main.js"],
  17. output: {
  18. dir: "dist",
  19. // You _must_ use either “amd” or “esm” as your format.
  20. // But note that only very few browsers have native support for
  21. // modules in workers.
  22. format: "amd"
  23. },
  24. plugins: [OMT()]
  25. };
  26. ```
  27. ### Auto bundling
  28. In your project's code:
  29. ```js
  30. const worker = new Worker("./worker.js", { type: "module" });
  31. ```
  32. This will just work.
  33. ### Importing workers as URLs
  34. 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:
  35. ```js
  36. import workerURL from "omt:./worker.js";
  37. import paintWorkletURL from "omt:./paint-worklet.js";
  38. const worker = new Worker(workerURL, { name: "main-worker" });
  39. CSS.paintWorklet.addModule(paintWorkletURL);
  40. ```
  41. `./worker.js` and `./paint-worklet.js` will be added to the output as chunks.
  42. ## Options
  43. ```js
  44. {
  45. // ...
  46. plugins: [OMT(options)];
  47. }
  48. ```
  49. - `loader`: A string containing the EJS template for the amd loader. If `undefined`, OMT will use `loader.ejs`.
  50. - `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_.
  51. - `workerRegexp`: A RegExp to find `new Workers()` calls. The second capture group _must_ capture the provided file name without the quotes.
  52. - `amdFunctionName`: Function name to use instead of AMD’s `define`.
  53. - `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.
  54. - `urlLoaderScheme`: Scheme to use when importing workers as URLs. If `undefined`, OMT will use `"omt"`.
  55. [when workers]: https://dassur.ma/things/when-workers
  56. [a gist]: https://gist.github.com/surma/a02db7b53eb3e7870bf539b906ff6ff6
  57. ---
  58. License Apache-2.0