This article will discuss several approaches to importing JavaScript modules into an application. JavaScript contributes to the development of complex web applications. We have to organize the codebase into several modules or dependencies, As projects get larger and more complex.
The ECMAScript introduced native support for modules.
What is Importing in JavaScript?
Importing JavaScript is a process of including external code, modules, or dependencies to the project you’re working on. JavaScript modules help developers in breaking down their code into more manageable and reusable parts.
Traditional Way to Include Files
The script tag in HTML documents is being used to include JavaScript files. Our UI application or HTML project still uses the same method for integrating third-party libraries.
Example Include Module By Script Tags:
<script src="testController.js"></script>
Include Files Using Modules
The import statement is a component of the ECMAScript 6 (ES6) module, which we use to include functionality into our current file or module from other modules. Your JavaScript environment must support ECMAScript 6 modules for use it. ES6 modules are supported by most modern browsers and Node.js versions.
Let’s create a module1.js file and define one function to console message.
// module1.js
export const greeting = "Hello, ";
export function sayHello(name) {
console.log(greeting + name);
}
The export keyword is used to make the variables, functions, or objects usable in other modules.
Example Include File By Import:
// main.js
import { greeting, sayHello } from './module1.js';
const name = 'John';
sayHello(name);
The import statement in main.js is used to include the exported members from module1.js into this file. The path of the file is should be a relative or absolute path.
CommonJS Modules
CommonJS was a popular module system in the Node.js application before ESM. It is still widely used, especially in server-side development:
Example CommonJS:
// common.js
var greeting = "Hello, ";
function sayHello(name) {
console.log(greeting + name);
}
// Export the functionality
module.exports = {
greeting: greeting,
sayHello: sayHello,
};
in the above code, The module.exports is used to export the functionality. The properties of this object become accessible to other modules that require this module.
Let’s import and use this module in another file main.js:
// main.js
const utils = require('./common.js');
const result = utils.sayHello('Adam);
console.log(result);
I have used require method to import the common.js module and its members (greeting and sayHello), that can be accessed as properties of the common object.
Output:
"Hello, Adam"
Dynamic Imports Module in JavaScript
JavaScript Dynamic imports enable asynchronous module loading and manipulation during runtime. It reduces the time it takes for your application to load initially by loading modules as needed.
// main.js
const button = document.getElementById('myButton');
button.addEventListener('click', async () => {
const { myFunction } = await import('./common.js');
myFunction();
});
In this case, the application loads faster because the module is imported only when the button is pressed.
Conclusion:
We’ve talked about the CommonJS pattern, contemporary modules, and the outdated script tag. A common skill for modern JavaScript development on the code side of your project is importing, which helps in the creation of smaller, reusable components. It can be used as needed. Common is used in Node.js before the introduction of native ECMAScript 6 modules.
