mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-08 01:17:23 +08:00
102 lines
4.4 KiB
Markdown
102 lines
4.4 KiB
Markdown
# rollup-plugin-web-worker-loader
|
|
|
|
Rollup plugin to handle Web Workers.
|
|
|
|
Can inline the worker code or emit a script file using code-splitting.
|
|
Handles Worker dependencies and can emit source maps.
|
|
Worker dependencies are added to Rollup's watch list.
|
|
Supports bundling workers for Node.js environments
|
|
|
|
### Getting started
|
|
|
|
```
|
|
yarn add rollup-plugin-web-worker-loader --dev
|
|
```
|
|
|
|
Add the plugin to your rollup configuration:
|
|
|
|
```javascript
|
|
import webWorkerLoader from 'rollup-plugin-web-worker-loader';
|
|
|
|
export default {
|
|
entry: 'src/index.js',
|
|
plugins: [
|
|
webWorkerLoader(/* configuration */),
|
|
],
|
|
format: 'esm',
|
|
};
|
|
```
|
|
|
|
Bundle the worker code using the RegEx pattern specified in the plugin's configuration.
|
|
By default you can add the prefix `web-worker:` to your imports:
|
|
|
|
```javascript
|
|
// here we use the default pattern but any RegEx can be configured
|
|
import DataWorker from 'web-worker:./DataWorker';
|
|
|
|
const dataWorker = new DataWorker();
|
|
dataWorker.postMessage('Hello World!');
|
|
```
|
|
|
|
### Configuration
|
|
The plugin responds to the following configuration options:
|
|
```javascript
|
|
webWorkerLoader({
|
|
targetPlatform?: string, // The platform workers should be built for, can be 'auto', 'browser' or 'node'.
|
|
// specifying either 'browser' or 'node' reduces the amount of loader code.
|
|
// Default: 'auto'
|
|
|
|
pattern?: RegEx, // A RegEx instance describing the pattern that matches the files to import as
|
|
// web workers. If capturing groups are present, the plugin uses the contents of the
|
|
// last capturing group as the path to the worker script. Default: /web-worker:(.+)/
|
|
|
|
extensions?: string[], // An array of strings to use as extensions when resolving worker files.
|
|
// Default: ['.js']
|
|
|
|
|
|
sourcemap?: boolean, // When inlined, should a source map be included in the final output. Default: false
|
|
|
|
inline?: boolean, // Should the worker code be inlined (Base64). Default: true
|
|
|
|
forceInline?: boolean, // *EXPERIMENTAL* when inlined, forces the code to be included every time it is imported
|
|
// useful when using code splitting: Default: false
|
|
|
|
preserveSource?: boolean, // When inlined and this option is enabled, the full source code is included in the
|
|
// built file, otherwise it's embedded as a base64 string. Default: false
|
|
|
|
enableUnicodeSupport?: boolean, // When inlined in Base64 format, this option enables unicode support (UTF16). This
|
|
// flag is disabled by default because supporting UTF16 doubles the size of the final
|
|
// payload. Default: false
|
|
|
|
outputFolder?: string, // When code splitting is used (`inline: false`), folder in which the worker scripts
|
|
// should be written to. Default: '' (same as build output folder)
|
|
|
|
loadPath?: string, // This option is useful when the worker scripts need to be loaded from another folder.
|
|
// Default: ''
|
|
|
|
skipPlugins?: Array // Plugin names to skip for web worker build
|
|
// Default: [ 'liveServer', 'serve', 'livereload' ]
|
|
})
|
|
```
|
|
|
|
### TypeScript
|
|
An example project that uses this plugin with TypeScript can be found [here](https://github.com/darionco/rollup-typescript-webworkers)
|
|
|
|
### Notes
|
|
**WARNING:** To use code-splitting for the worker scripts, Rollup v1.9.2 or higher is required. See https://github.com/rollup/rollup/issues/2801 for more details.
|
|
|
|
The `sourcemap` configuration option is ignored when `inline` is set to `false`, in that case the project's sourcemap configuration is inherited.
|
|
|
|
`loadPath` is meant to be used in situations where code-splitting is used (`inline = false`) and the entry script is hosted in a different folder than the worker code.
|
|
|
|
|
|
### Roadmap
|
|
- [x] Bundle file as web worker blob
|
|
- [x] Support for dependencies using `import`
|
|
- [x] Include source map
|
|
- [x] Configuration options to inline or code-split workers
|
|
- [ ] ~~Provide capability checks and fallbacks~~ DROPPED (all modern environments support workers)
|
|
- [ ] ~~Avoid code duplication~~ DROPPED (there are better solutions for this purpose)
|
|
|
|
|