Javascript - Module Loader (Script Loader)

About

A loader searches and loads module and script into the javascript engine (environment).

From the main script, they will:

They will generally load them recursively while building the dependency graph to gain speed

Environment

Browser

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

<script type="module" ...>
export default function () {
  import('./foo.js').then(({ default: foo }) => console.log(foo));
}
require("moduleId", function(moduleExport){ ... })
dojo.require("some.module")
$LAB.script("some/module.js")

Node

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

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

Monitor

Node Loader monitors modify the code loaded dynamically.

Documentation / Reference


Powered by ComboStrap