A brief history of JavaScript modules
Technically speaking, developers have been using modules in JavaScript for some time now. Solutions like CommonJS (for Node.js), Browserify, and Require.js have allowed developers to separate their code into reusable modules that make the code easier to maintain.
CommonJS was essentially the basis for Node’s package management system, npm. This allowed developers to create packages, or modules, that they can add to a remote registry, allowing others to use them. They, too, could use modules on npm’s registry for their own projects. But this was exclusive to Node.js (backend JavaScript), so browsers (i.e., client-side JavaScript) didn’t have a way to incorporate this modular package management.
That’s why JavaScript developers created tools like Browserify and Require.js to incorporate modules and bundle them for frontend projects. Later, the community introduced more powerful bundling solutions like Webpack and Parcel, allowing the process to be a regular part of modern JavaScript development.
If you want to delve deeper into the details of the history of JavaScript modules, see this article.
Native JavaScript modules
Solutions like CommonJS were necessary to make modules possible in JavaScript (particularly in Node.js). But JavaScript needed something better. In 2015, the ECMAScript standard officially added support for native modules (or ES Modules) that would no longer require third-party tooling for modular development in the browser.
Native modules are beneficial for several reasons, including:
- JavaScript modules allow developers to encapsulate and organize code into smaller, reusable parts. This modularity makes it easier to manage and maintain any codebase.
- You can reuse JS Modules, which avoids duplication in a project and helps keep code DRY (i.e., “Don’t Repeat Yourself”).
- Modules ensure that the browser loads only the necessary parts of the code at any given time, thus improving the performance of web apps, including PWAs.
- Modular code largely prevents naming conflicts since modularity isolates variables and other references, thus preventing conflict with other modules and not polluting the global scope.
- Modules make unit testing much easier, since you can run tests on isolated modules without affecting other pieces of code.
With that small history lesson and the benefits made clear, let’s now dig into the code so you can see how to use JS Modules in modern web apps.
Syntax for including JavaScript modules
You can insert any JavaScript module into a web page using almost the same syntax as any other script. But note one small difference:
body>
...
script src="index.js" type="module">script>
body>
Code language: HTML, XML (xml)In the above code, I’ve added the
