ES6 modules vs CommonJS
Definition
Modules — a way to include functionality declared in one file within another. Typically, a developer creates an encapsulated library of code responsible for handling related tasks. That library can be referenced by applications or other modules.
The benefits:
Code can be split into smaller files of self-contained functionality.
The same modules can be shared across any number of applications.
Ideally, modules need never be examined by another developer, because they’ve has been proven to work.
Code referencing a module understands it’s a dependency. If the module file is changed or moved, the problem is immediately obvious.
Module code (usually) helps eradicate naming conflicts. Function
x()
in module1 cannot clash with functionx()
in module2. Options such as namespacing are employed so calls becomemodule1.x()
andmodule2.x()
.
Before the modules arrived, The Revealing Module Pattern was getting used.
var revealingModule = (function () {
var privateVar = "Ben Thomas";
function setNameFn( strName ) {
privateVar = strName;
}
return {
setName: setNameFn,
};
})();
revealingModule.setName( "Paul Adams" );
CommonJS
They came up with a separate approach to interact with the module system using the keywords require and exports. require is a function used to import functions from another module. exports is an object where any function put into it will get exported.
//------ payments.js ------
var customerStore = require('store/customer');
// import module//------ store/customer.js ------
exports = function(){
return customers.get('store);
}
In the above example, the customerStore is imported to the payments.js. The function which is set to the exports object in customer module is loaded in payments file.
These modules are designer for server development and these are synchronous.ie., the files are loaded one by one in order inside the file.
ECMAScript 6 modules (Native JavaScript)
ECMAScript 6 a.k.a., ES6 a.ka., ES2015 offers possibilities for importing and exporting modules compatible with both synchronous and asynchronous modes of operation.
//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}
//------ main.js ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5
The import statement is used to bring modules into the namespace. It is not dynamic, cannot be used anywhere in the file. This is in contrast with the require and define. The export statement makes the elements public. This static behavior makes the static analyzers build the tree of dependencies while bundling the file without running code. This is used by modern JavaScript frameworks like ReactJS, EmberJS, etc. The drawback is that it isn’t fully implemented in the browsers and it requires a transpiler like Babel to render in the unsupported browsers.
If you are looking at starting a new module or project, ES2015 is the right way to go and CommonJS/Node remains the choice for the server.
Last updated
Was this helpful?