optimizer-require

1.3.4 • Public • Published

optimizer-require

Plugin for the RaptorJS Optimizer that adds support for transporting Node.js-style modules to the browser.

Installation

This plugin is included as part of the optimizer module so it is not necessary to use npm install to add the module to your project. However, if you want to use a specific version of the optimizer-require plugin then you can install it using the following command:

npm install optimizer-require --save

Usage

This plugin is enabled by default, but if you want to provide your own configuration then you can do that using code similar to the following:

require('optimizer').configure({
    plugins: [
        {
            plugin: 'optimizer-require',
            config: {
                transforms: [ // Browserify compatible transforms
                    'deamdify'
                ]
            }
        }
    ]
})

The optimizer-require plugin introduces two new dependency types that you can use to target Node.js modules for the browser. There usage is shown in the following optimizer.json file:

{
    "dependencies": [
        "require: jquery",
        "require-run: ./main"
    ]
}

These new dependency types are described in more detail below.

Dependency Types

require

The require dependency type will wrap a Node.js module for delivery to the browser and allow it to be required from another module. For example:

Input modules:

foo.js:

exports.add = function(a, b) {
    return a + b;
}

bar.js:

var foo = require('./foo');
 
exports.sayHello = function() {
    console.log('Hello World! 2+2=' + foo.add(2, 2));
};

Output Bundles:

After running the following command:

optimizer require:./foo require:./bar --name test

The output written to static/test.js will be the following:

$rmod.def("/foo", function(require, exports, module, __filename, __dirname) { exports.add = function(a, b) {
    return a + b;
} });
$rmod.def("/bar", function(require, exports, module, __filename, __dirname) { var foo = require('./foo');
 
exports.sayHello = function() {
    console.log('Hello World! 2+2=' + foo.add(2, 2));
}; });

NOTE: $rmod is a global introduced by the client-side Node.js module loader. It should never be used directly!. The code that declares $rmod is not shown in the output above for brevity.

require-run

In the previous examples, neither the foo.js or bar.js module will actually run. The require-run dependency type should be used to make a module self-executing. This is the equivalent of the entry point for your application when loaded in the browser.

Continuing with the previous example:

Input modules:

foo.js (see above)

bar.js (see above)

main.js:

require('./bar').sayHello();

Output Bundles:

After running the following command:

optimizer require-run:./main --name test

Alternatively:

optimizer --main main.js --name test

The output written to static/test.js will be the following:

$rmod.def("/foo", function(require, exports, module, __filename, __dirname) { exports.add = function(a, b) {
    return a + b;
} });
 
$rmod.def("/bar", function(require, exports, module, __filename, __dirname) { var foo = require('./foo');
 
exports.sayHello = function() {
    console.log('Hello World! 2+2=' + foo.add(2, 2));
}; });
 
$rmod.run("/main", function(require, exports, module, __filename, __dirname) { require('./bar').sayHello(); });

Conditional Remap

The optimizer-require supports the package.json browser field for remapping a JavaScript module to a different module during client-side bundling. For example:

{
    "browser": {
        "./foo.js": "./foo-browser.js"
    }
}

The optimizer-require plugin also allows modules to be conditionally remapped based on the set of enabled flags by adding additional information an optimizer.json in the same directory as a module. For example:

{
    "dependencies": [
        ...
    ],
    "requireRemap": [
        {
            "from": "./foo.js",
            "to": "./foo-mobile.js",
            "if-flag": "mobile"
        }
    ]
}

If the mobile flag is set during optimization and the foo.js module is required on the client (e.g., require('./foo')) then the returned module will be the exports for foo-mobile.js (not foo.js).

Package Sidebar

Install

npm i optimizer-require

Weekly Downloads

4

Version

1.3.4

License

Apache License v2.0

Last publish

Collaborators

  • austinkelleher
  • dylanpiercey
  • mlrawlings
  • pnidem
  • philidem