ESM

ECMAScript Modules - the official standard format for packaging JavaScript code for reuse, using import and export statements.

Overview

ESM (ES Modules or ECMAScript Modules) is the standardized module system for JavaScript, introduced in ES6. It provides a way to organize code into reusable pieces with explicit dependencies. ESM is now supported natively in modern browsers and Node.js, replacing older systems like CommonJS and AMD.

Example

javascript
// math.js - ESM module
export const PI = 3.14159;

export function circle Area(radius) {
  return PI * radius * radius;
}

export default class Calculator {
  add(a, b) {
    return a + b;
  }
}

// app.js - Using ESM
import Calculator, { PI, circleArea } from './math.js';

const calc = new Calculator();
console.log(calc.add(5, 3)); // 8
console.log(circleArea(10)); // 314.159

// Dynamic import (lazy loading)
async function loadModule() {
  const module = await import('./heavy-module.js');
  module.doSomething();
}

// Browser usage
<script type="module">
  import { hello } from './greet.js';
  hello();
</script>

// package.json for Node.js
{
  "type": "module"
}

Key Points

  • Official JavaScript module standard
  • Uses import/export syntax
  • Static structure (analyzable)
  • Supports dynamic imports
  • Native browser and Node.js support

Learn More