First off, what is a module system?
Stated briefly, it’s the language feature that enables encapsulation and re-use of code; basically allows developers to write modular code. The general benefits of modular software design are well documented.
Most popular programming languages provide some sort of a module system (although named differently) as part of the language specification. Until very recently (ES 2015), the Javascript language did not have a module system, i.e. language features to support packaging and encapsulation of code for reuse. Various solutions like CommonJS, AMD were created to fill the gap.
I have been using CommonJS for a while now, and I have to admit, I don’t find it as intuitive as similar features available in other languages like Java and Python.
I have attempted to highlight the basic features of a Javascript module system, namely, CommonJS and ES6 modules (ESM), using a concrete example.
Lets say you created functions to compute the area and the circumference of a circle.
function computeArea(radius) {…}
function computeCircumference() {…}
In addition, you have defined a variable const PI = 3.14 used by the two functions.
Let’s walk through steps to package the functions and make them avaialble for re-use.
##1. Create a module First step in modularization is to define a module. In Javascript, a module is javascript file. Simple enough. The Javascript file i.e., module, contains definitions of things that you want to make visible to be used. Let’s create a file circleUtils.js and throw the function definitions area() and circumference() in it along with the variable PI.
2. Export the functions
Once the definitions are created, you have to make them available (or visible) in order to be re-used. In Javascript, you will have to export it. In Java, declaring something as public is equivalent to “exporting” a definition. As a module creator, you will have to explicitly specify which of the definitions you want to export.
In our example, you only want to export the function definitions area() and circumference() but not the const PI.
Lets look at how to do this in CommonJS and ESM (ES Modules). In CommonJS, the following statement does the trick -
module.exports = {area, circumference}
An alternative way of doing it in CommonsJS is -
exports.area = area
exports.circumference = circumference
These statements should appear in the module file, which in our case is, circleUtils.js.
Using ESM, you can simply use the export keyword export {area, circumference} to achieve the same
3. Import the functions
Now lets look at how to actually import (or use) the definitions available in the circleUtils.js module
CommonJS
const circleUtils = require('./circleUtils')
console.log(circleUtils.circumference(5))
console.log(circleUtils.area(5))
Alternatively, you can use the object de-structuring syntax to achieve the same -
const {circumference, area} = require('./circleUtils')
console.log(circumference(5))
console.log(area(5))
ESM
import {circumference, area} from './circleUtils'
console.log(circumference(5))
console.log(area(5))
All of the code is in github.
I have includes examples for both CommonJS and ESM.