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
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
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 );
script.addEventListener('load', function() {
const browser = bowser.getParser(window.navigator.userAgent);
console.log(`Your browser name is "${browser.getBrowserName()}"`);
});
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")
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
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'"
}
Node Loader monitors modify the code loaded dynamically.