In modern web development, having a single point for loading JavaScript libraries helps maintain consistency and manage dependencies efficiently across a web application. This guide covers setting up a `load-libraries.js` file to streamline JavaScript library loading across your project.
The `load-libraries.js` file acts as a central hub for importing various JavaScript libraries used in the application, making it easier to manage and apply scripts globally.
Follow these steps to create and set up the `load-libraries.js` file:
load-libraries.js in your project's JavaScript directory.load-libraries.js, include scripts using a function to load them dynamically. For example:
// Load multiple CDN links using the same base code structure
(function() {
// Define an array of CDN URLs
var scriptUrls = [
'https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js'
// Add more URLs as needed separated by a comma
];
// Function to load a script
function loadScript(url) {
var script = document.createElement('script');
script.src = url;
script.async = true;
// Add error handling
script.onerror = function() {
console.error('Failed to load script:', url);
};
document.head.appendChild(script);
// console.log('Script added:', url);
// Uncomment above line for testing
// uncommenting above line will show loaded URL in Dev View
}
// Iterate over the array and load each script
scriptUrls.forEach(loadScript);
})();
Using a central script loader like `load-libraries.js` offers several benefits:
To include `load-libraries.js` in your HTML file, add a script tag in the head or body section of your HTML document:
<!-- Example HTML head or body -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Application</title>
<!-- Centralized JavaScript Loader -->
<script src="../../js/load-libraries.js" type="text/javascript"></script>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
To ensure `load-libraries.js` is properly loaded:
