Javascript - Module Loader (Script Loader)


module and script loaders are about either:

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


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



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      = "";

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

// That's it!

Module Manager Example


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