Module 14: ES Modules

Overview

This module provides comprehensive coverage of JavaScript module systems, from legacy patterns to modern ES Modules. Understanding modules is essential for organizing code, managing dependencies, and building scalable applications.

Learning Objectives

By the end of this module, you will be able to:

• •Understand the evolution of JavaScript module systems
• •Use ES Module syntax for imports and exports
• •Work with CommonJS and AMD for legacy/Node.js environments
• •Configure bundlers and build tools
• •Apply module patterns for clean architecture

Prerequisites

• •Module 5: Functions (closures, scope)
• •Module 11: Classes (class syntax)
• •Module 13: Modern JavaScript (ES6+ features)

Sections

14.1 Module Systems Overview

• •Why modules exist
• •History: IIFE → CommonJS → AMD → UMD → ESM
• •Module benefits and design goals
• •Comparing module formats

14.2 ES Modules Syntax

• •import and export statements
• •Named vs default exports
• •Re-exporting modules
• •Dynamic imports with import()
• •Top-level await
• •Import assertions

14.3 CommonJS and AMD

• •CommonJS (require/module.exports)
• •AMD and RequireJS
• •UMD pattern
• •Node.js module resolution
• •Interoperability between formats

14.4 Bundlers and Build Tools

• •Webpack fundamentals
• •Rollup and tree-shaking
• •Vite and ESBuild
• •Babel transforms
• •Source maps and debugging

14.5 Module Patterns

• •Organizing large codebases
• •Barrel files and re-exports
• •Circular dependency handling
• •Lazy loading strategies
• •Module federation

Module Format Comparison

┌────────────────────────────────────────────────────────────────────────────┐
│                     JavaScript Module Formats Timeline                      │
├────────────────────────────────────────────────────────────────────────────┤
│                                                                            │
│   2009          2011          2015          2017          2020             │
│     │             │             │             │             │              │
│     ▼             ▼             ▼             ▼             ▼              │
│   CommonJS      AMD          ES Modules    Dynamic      Top-Level          │
│   (Node.js)   (Browser)     (ES2015)       Import       Await              │
│                                                                            │
│   require()   define([],   import/export  import()     await import()     │
│   module.     function(){})                             (module scope)      │
│   exports                                                                   │
│                                                                            │
└────────────────────────────────────────────────────────────────────────────┘

Key Syntax Comparison

File Structure

Module-14-ES-Modules/
├── README.md
├── 14.1-Module-Systems-Overview/
│   ├── README.md
│   ├── examples.js
│   └── exercises.js
├── 14.2-ES-Modules-Syntax/
│   ├── README.md
│   ├── examples.js
│   └── exercises.js
├── 14.3-CommonJS-AMD/
│   ├── README.md
│   ├── examples.js
│   └── exercises.js
├── 14.4-Bundlers-Build-Tools/
│   ├── README.md
│   ├── examples.js
│   └── exercises.js
└── 14.5-Module-Patterns/
    ├── README.md
    ├── examples.js
    └── exercises.js

Best Practices

1. •Prefer ES Modules - Native browser support, static analysis
2. •Use named exports - Better refactoring, tree-shaking
3. •Avoid circular dependencies - Restructure if detected
4. •Keep modules focused - Single responsibility
5. •Use barrel files wisely - Can impact bundle size
6. •Configure path aliases - Cleaner import paths

Next Steps

After completing this module, proceed to:

• •Module 15: Asynchronous JavaScript (Promises, async/await)
• •Module 24: JavaScript Engine Internals (Module loading internals)