Javascript - Module Loader (Script Loader)

Browser: 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.

Example of a simple asynchronous script-loader

• Create a new script element and set the source (For this example, we use bowser to detect your browser)

var script      = document.createElement('script');
script.src      = "https://cdnjs.cloudflare.com/ajax/libs/bowser/2.11.0/bundled.min.js"; // Set the location of the script
script.integrity ="sha512-hsF/cpBvi/vjCP4Ps/MrPUFk6l4BqcGbzVUhqjJdX2SmAri1Oj8FBUGCvBiKHYd6gg3vLsV16CtIRNOvK5X4lQ==";
script.crossOrigin="anonymous";
script.referrerPolicy="no-referrer";

• Select the head (it works also under the body but this is not html conform even if it's supported by all browsers)
• And add the script as DOM child with appendChild

let head = document.querySelector('head');
head.appendChild( script );

• When the script trigger the load event, you can start use it.

script.addEventListener('load', function() {
    const browser = bowser.getParser(window.navigator.userAgent);
    console.log(`Your browser name is "${browser.getBrowserName()}"`);
});

• Output:

Browser: Library

browser script loading API:

• ESM module with the script type to module

<script type="module" ...>

export default function () {
  import('./foo.js').then(({ default: foo }) => console.log(foo));
}

• Dynamic Import with the import function
• RequireJs: Amd based loader: What is RequireJs: the browser module loader ?

require("moduleId", function(moduleExport){ ... })

• systemjs - supports the system-register format to add module features such as listing the module loaded, …
• Dojo: Dojo (Dojo Toolkit)

dojo.require("some.module")

• LABjs (Loading And Blocking JavaScript) - load all JavaScript files in parallel ensuring proper execution dependencies order

$LAB.script("some/module.js")

Node Native

In node, the CommonJs module is used.

Therefore the require function is used as loader.

You can influence it via the NODE_PATH that may contain a list of path where module should be searched

Node Library

• http://www.requirejs.org/

Node Snippet example

An example of a node loader

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'"
}