requirejs-worker

Require.JS plugin to simplify Web Workers management.

Features

requirejs-worker is a Work In Progress, some features are already availables but a lot of tests and improvements needs to be done.

• [x] Load module in a Web Worker proxy
• [x] Provide module proxy methods in DOM context
• [x] Test on Chrome, Firefox, Edge, IE 10 (with Promise polyfill)
• [ ] Test on Opera, Safari, mobiles...
• [ ] Allow multiple Workers
• [ ] Create Workers from Web Worker
• [ ] Allow SharedWorker ?
• [ ] Create a Proxy when Web Workers are not availables
• [ ] Optimize performances
• [ ] Optimize almonds builds

Installation

NPM

npm install requirejs-worker --save

Bower

bower install requirejs-worker --save

Manual

Simply clone the repository or download the last release.

Configuration

Basic configuration

Configure paths in your requirejs configuration:

requirejs.config({
    paths: {
        worker: "path/to/workerlib/worker"
    },
    worker: {
        // requirejs-worker options goes here.
        debug: true
    }
});

Available options

• path: (Optional) URL of the worker. Default: webworker.js
• debug: (Optional) Output debug informations to console. Default: false
• stack: (Optional) Send error stacks from Web Worker. Default: false

Usage

Create a webworker.js bootstrapper file

Create a webworker.js bootstrapper file in the same directory as your main file with the following content:

importScripts("path/to/requirejs/require.js");

requirejs.config({
    paths: {
        worker: "path/to/workerlib/worker"
        // Add your config here
    }
});

require(["worker/proxy"], function(proxy) {
    onmessage = proxy.onmessage;
    proxy.init();
});

Define a simple module

calc.js

define({
    add: function (a, b) {
        return a + b;
    },
    sub: function (a, b) {
        return a - b;
    },
    mul: function (a, b) {
        return a * b;
    },
    div: function (a, b) {
        return a / b;
    }
});

Reference the module in another module

define(["worker!calc"], function (calc) {

});

Use the module

Every methods are proxied using Promises.

define(["worker!calc"], function (calc) {

    calc.add(2, 3)
        .then(function(result) { console.log(result === 5); })
        .catch(function(error) { console.error(error); });

});

Building

requirejs-worker includes a plugin builder which:

• append modules in base file in case of fallback
• create a webworker.js file alongside to the out file which contains every workers modules.

Configuration

To enable web worker building, you need to include require.js in your resulting build:

build.js

({
    name: "requirejs",
    baseUrl: "tests",
    out: "dist/main.js",

    paths: {
        requirejs: "path/to/requirejs/require",
        worker: "path/to/workerlib/worker"
    },

    worker: {
        // requirejs-worker config goes here
        path: "worker.js"
    },

    include: ["main"],
    insertRequire: ["main"],

    wrap: true
})

requirejs-worker will automatically adapt the configuration to generate the webworker.js file.

Available Worker Options

• path: (Optional) URL of the destination worker file. Default: webworker.js
• overrides: (Optional) Configuration overrides for Web worker optimization. Default: {}
• fallbacks: (Optional) Output modules in both files in case of no Web Worker support. Default: true
• output: (Optional) Set to false to disable destionation worker file creation. Default: true

Note about almond

almond is an tiny implementation of the Require.JS API for use in built files. It drastically reduces the size of the package by dropping the asynchronous feature of Require.JS.

requirejs-worker include a hack to work with almond.

However, to generate module proxies in sync, it need to load the module in both environments (DOM + Web Worker). This has a major performance impact.

Waiting for a better workaround, we strongly encourage to not use requirejs-worker with almond