Javascript - Module Loader (Script Loader)

About

module and script loaders are about either:

  • helping organize your large application with module
  • keep the execution order of asynchronously loaded scripts.
  • increasing:

Configuration

NODE_PATH is a node environment variable where module will be searched by the module loader

Library

Implementations

Basic Script Loader

The most generic of script loaders simply create a script tag element and inject it into the loaded page. Since the DOM element is injected, it logically cannot 'block' the rendering of the rest of the page so the browser treats it as if it were asynchronous. Asynchronous scripts don't block so you can load more than one at a time.

// Very simple asynchronous script-loader

// Create a new script element
var script      = document.createElement('script');

// Find an existing script element on the page (usually the one this code is in)
var firstScript = document.getElementsByTagName('script')[0];

// Set the location of the script
script.src      = "http://example.com/myscript.min.js";

// Inject with insertBefore to avoid appendChild errors
firstScript.parentNode.insertBefore( script, firstScript );

// That's it!

Module Manager Example

Snippet

const lib = path.join(__dirname, '..', '..', 'lib')
if (fs.existsSync(lib)) {
  // Use the latest src
  module.exports.resolve = { alias: { 'library_name': lib } }
} else {
    throw "library source not built. Run the following: 'pushd ../.. && rm -rf node_modules && yarn install && yarn run build && popd' and then rerun 'yarn start'"
}

Documentation / Reference


Powered by ComboStrap