Shivam's blog

12. Understanding ES Modules (ESM) in Node.js: A New Era of Module System

Shivam Kumar's photo
Shivam Kumar
·

3 min read

Node.js, known for its server-side JavaScript capabilities, has long relied on the CommonJS module system for structuring code. Developers used module.exports and exports to share functionality across files. However, the introduction of ES Modules (ESM) with ES2015 brought a modern, standardized approach to modular code organization. In this article, we'll explore ES Modules in Node.js and see how they differ from the traditional CommonJS format.

CommonJS: The Traditional Approach

In the CommonJS module system, every file is treated as a module, and sharing functionality between them requires explicit export statements. Developers use module.exports or exports to expose variables, functions, or objects to other parts of the application. Here's a quick example:

// CommonJS module
const greet = (name) => `Hello, ${name}!`;

module.exports = greet;

In another file, you'd import and use this function:

const greet = require('./greet');
console.log(greet('Alice')); // Outputs: Hello, Alice!

ES Modules: A Modern Alternative

ES Modules, or ESM, emerged as a standard module system in JavaScript, providing a contemporary way to structure code. Unlike CommonJS, ESM uses the .mjs file extension to indicate that a file contains ES Modules. Here's an overview of key ESM features:

Default Exports

ES Modules allow exporting a single variable or function as the default using export default. This makes imports more flexible, allowing developers to choose their own names when importing:

// ESM module
const greet = (name) => `Hello, ${name}!`;

export default greet;

And in the importing module:

import myGreeting from './greet.mjs';
console.log(myGreeting('Bob')); // Outputs: Hello, Bob!

Direct Export Defaults

In ESM, you can export the default directly with the variable declaration, simplifying the code:

// ESM module
export default function greet(name) {
  return `Hello, ${name}!`;
}

import greet from './greet.mjs';
console.log(greet('Charlie')); // Outputs: Hello, Charlie!

Named Exports

ES Modules support exporting and importing multiple variables or functions as an object. You use the export keyword for named exports and curly braces {} for imports. The imported variable names must match the exported ones:

// ESM module
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

import { add, subtract } from './math.mjs';
console.log(add(5, 3)); // Outputs: 8
console.log(subtract(5, 3)); // Outputs: 2

ECMAScript Standards and Front-End Development

ES Modules adhere to ECMAScript standards and have become the common format for structuring code in front-end development, thanks to widespread browser support. This consistency between front-end and back-end code organization simplifies the development process and encourages code reuse.

The Transition: ESM vs. CommonJS in Node.js

While ES Modules are gaining popularity in Node.js, CommonJS remains the primary module system for the time being. Node.js introduced experimental support for ESM in recent versions, and developers have started transitioning to this modern approach.

In conclusion, ES Modules offer a more standardized and flexible way to structure your code in Node.js, aligning it with modern JavaScript practices and promoting compatibility with front-end development. As Node.js continues to evolve, it's essential for developers to adapt and embrace ESM, ensuring their code remains up-to-date and maintainable in the ever-changing landscape of JavaScript development.

Node.js