14.3 CommonJS & AMD

📖 Introduction

While ES Modules are the modern standard, understanding CommonJS and AMD is crucial for working with Node.js projects, npm packages, and legacy codebases. This section provides deep coverage of both systems.

┌─────────────────────────────────────────────────────────────────────────────┐
│                    COMMONJS vs AMD COMPARISON                               │
├─────────────────────────────────────────────────────────────────────────────┤
│                                                                             │
│   ┌─────────────────────────────┐    ┌─────────────────────────────┐       │
│   │        COMMONJS             │    │           AMD               │       │
│   │        (CJS)                │    │  (Asynchronous Module Def)  │       │
│   ├─────────────────────────────┤    ├─────────────────────────────┤       │
│   │                             │    │                             │       │
│   │  Created: 2009              │    │  Created: 2010              │       │
│   │  For: Node.js (Server)      │    │  For: Browsers              │       │
│   │  Loading: Synchronous       │    │  Loading: Asynchronous      │       │
│   │                             │    │                             │       │
│   │  require('./module')        │    │  define(['dep'], fn)        │       │
│   │  module.exports = {}        │    │  require(['dep'], fn)       │       │
│   │                             │    │                             │       │
│   │  ✓ Simple syntax            │    │  ✓ Non-blocking             │       │
│   │  ✓ Large npm ecosystem      │    │  ✓ Browser optimized        │       │
│   │  ✗ Sync = blocks in browser │    │  ✗ Verbose syntax           │       │
│   │                             │    │  ✗ Less common today        │       │
│   └─────────────────────────────┘    └─────────────────────────────┘       │
│                                                                             │
│   Both are being replaced by ES Modules, but remain in legacy code         │
│                                                                             │
└─────────────────────────────────────────────────────────────────────────────┘

---

🎯 Learning Objectives

By the end of this section, you will:

• •✅ Master CommonJS module patterns
• •✅ Understand the module wrapper function
• •✅ Learn AMD define/require patterns
• •✅ Configure RequireJS for browser modules
• •✅ Convert between module formats
• •✅ Handle interoperability issues

---

1️⃣ CommonJS Deep Dive

How CommonJS Works Internally

// ═══════════════════════════════════════════════════════════════
// What Node.js does behind the scenes
// ═══════════════════════════════════════════════════════════════

// Your code in math.js:
const PI = 3.14159;

function add(a, b) {
  return a + b;
}

module.exports = { PI, add };

// Node.js WRAPS it in a function:
(function (exports, require, module, __filename, __dirname) {
  // Your code runs inside this wrapper
  const PI = 3.14159;

  function add(a, b) {
    return a + b;
  }

  module.exports = { PI, add };

  // Return module.exports
});

// That's why you have access to:
// - exports     (shortcut to module.exports)
// - require     (function to load other modules)
// - module      (info about current module)
// - __filename  (absolute path to this file)
// - __dirname   (absolute path to directory)

┌─────────────────────────────────────────────────────────────────────┐
│                    COMMONJS MODULE WRAPPER                          │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│   Every CommonJS file is wrapped in a function:                     │
│                                                                     │
│   ┌─────────────────────────────────────────────────────────────┐  │
│   │  (function(exports, require, module, __filename, __dirname) │  │
│   │  {                                                           │  │
│   │      ┌─────────────────────────────────────────────────┐    │  │
│   │      │                                                  │    │  │
│   │      │              YOUR CODE HERE                      │    │  │
│   │      │                                                  │    │  │
│   │      │  const x = 1;                                    │    │  │
│   │      │  module.exports = { x };                         │    │  │
│   │      │                                                  │    │  │
│   │      └─────────────────────────────────────────────────┘    │  │
│   │  });                                                         │  │
│   └─────────────────────────────────────────────────────────────┘  │
│                                                                     │
│   Parameters Available:                                             │
│   ┌───────────────┬───────────────────────────────────────────┐    │
│   │ exports       │ Shortcut to module.exports                │    │
│   │ require       │ Function to import modules                │    │
│   │ module        │ Reference to current module               │    │
│   │ __filename    │ /home/user/project/src/file.js            │    │
│   │ __dirname     │ /home/user/project/src                    │    │
│   └───────────────┴───────────────────────────────────────────┘    │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

CommonJS Export Patterns

// ═══════════════════════════════════════════════════════════════
// Pattern 1: Exporting an Object
// ═══════════════════════════════════════════════════════════════

// math.js
const PI = 3.14159;
const E = 2.71828;

function add(a, b) {
  return a + b;
}
function subtract(a, b) {
  return a - b;
}

// Export as object
module.exports = {
  PI,
  E,
  add,
  subtract,
};

// Usage
const math = require('./math');
console.log(math.PI); // 3.14159
console.log(math.add(2, 3)); // 5

// ═══════════════════════════════════════════════════════════════
// Pattern 2: Exporting a Function
// ═══════════════════════════════════════════════════════════════

// logger.js
function createLogger(prefix) {
  return {
    log: (msg) => console.log(`[${prefix}] ${msg}`),
    error: (msg) => console.error(`[${prefix}] ERROR: ${msg}`),
  };
}

module.exports = createLogger;

// Usage
const createLogger = require('./logger');
const logger = createLogger('App');
logger.log('Started');

// ═══════════════════════════════════════════════════════════════
// Pattern 3: Exporting a Class
// ═══════════════════════════════════════════════════════════════

// User.js
class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }

  greet() {
    return `Hello, I'm ${this.name}`;
  }
}

module.exports = User;

// Usage
const User = require('./User');
const user = new User('Alice', 'alice@example.com');

// ═══════════════════════════════════════════════════════════════
// Pattern 4: Using exports Shortcut
// ═══════════════════════════════════════════════════════════════

// utils.js
exports.capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
exports.lowercase = (str) => str.toLowerCase();
exports.VERSION = '1.0.0';

// ⚠️ CAUTION: Don't reassign exports!
exports = { something: 'new' }; // ❌ BREAKS the reference!
module.exports = { something: 'new' }; // ✅ Correct way

// ═══════════════════════════════════════════════════════════════
// Pattern 5: Augmenting exports and module.exports
// ═══════════════════════════════════════════════════════════════

// api.js
// Add individual exports
exports.get = (url) => fetch(url);
exports.post = (url, data) => fetch(url, { method: 'POST', body: data });

// Also set a default function
module.exports = function (baseUrl) {
  return {
    get: (path) => exports.get(baseUrl + path),
    post: (path, data) => exports.post(baseUrl + path, data),
  };
};

// Attach the individual methods to the function
module.exports.get = exports.get;
module.exports.post = exports.post;

// Usage (both work):
const createApi = require('./api');
const api = createApi('https://api.example.com');

const { get, post } = require('./api');

The require() Algorithm

// ═══════════════════════════════════════════════════════════════
// How require() resolves modules
// ═══════════════════════════════════════════════════════════════

// 1. Core modules (built-in)
const fs = require('fs'); // Built-in, highest priority
const path = require('path'); // No path = core module

// 2. File modules (relative/absolute paths)
const myModule = require('./myModule'); // Relative
const other = require('../lib/other'); // Parent directory
const abs = require('/home/user/module'); // Absolute

// 3. Node modules (node_modules directory)
const lodash = require('lodash'); // Looks in node_modules
const express = require('express'); // Climbs up directory tree

// 4. Resolution order for require('./myModule'):
//    a. ./myModule.js
//    b. ./myModule.json
//    c. ./myModule.node (native addon)
//    d. ./myModule/index.js
//    e. ./myModule/index.json
//    f. ./myModule/package.json → main field

┌─────────────────────────────────────────────────────────────────────┐
│                    require() RESOLUTION                             │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│   require('X')                                                      │
│        │                                                            │
│        ├─▶ Is X a core module? (fs, path, http...)                 │
│        │   YES → Return core module                                 │
│        │                                                            │
│        ├─▶ Does X start with './' or '../' or '/'?                  │
│        │   YES → Load as FILE or DIRECTORY                          │
│        │         ┌────────────────────────────────────┐            │
│        │         │ TRY IN ORDER:                      │            │
│        │         │ 1. X.js                            │            │
│        │         │ 2. X.json                          │            │
│        │         │ 3. X.node                          │            │
│        │         │ 4. X/index.js                      │            │
│        │         │ 5. X/package.json → main           │            │
│        │         └────────────────────────────────────┘            │
│        │                                                            │
│        └─▶ Otherwise, search node_modules                          │
│            Start from current directory, climb up                   │
│            ./node_modules/X                                         │
│            ../node_modules/X                                        │
│            ../../node_modules/X                                     │
│            ... until root                                           │
│                                                                     │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│   CACHING:                                                          │
│                                                                     │
│   require('X')  ──▶  CACHE HIT?  ──▶ YES ──▶ Return cached         │
│                          │                                          │
│                          NO                                         │
│                          │                                          │
│                          ▼                                          │
│                     Load module                                     │
│                     Execute code                                    │
│                     Cache result                                    │
│                     Return exports                                  │
│                                                                     │
│   // Same module loaded once, result reused                         │
│   require('./a');  // Loads and executes                            │
│   require('./a');  // Returns cached                                │
│   require('./a');  // Returns cached                                │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

Module Caching

// ═══════════════════════════════════════════════════════════════
// Understanding CommonJS caching
// ═══════════════════════════════════════════════════════════════

// counter.js
console.log('Module loaded!');

let count = 0;

module.exports = {
  increment: () => ++count,
  getCount: () => count,
};

// app.js
const counter1 = require('./counter'); // "Module loaded!" (first time)
const counter2 = require('./counter'); // (nothing - cached!)
const counter3 = require('./counter'); // (nothing - cached!)

console.log(counter1 === counter2); // true (same object!)
console.log(counter2 === counter3); // true

counter1.increment();
console.log(counter2.getCount()); // 1 (shared state!)

// Clearing cache (useful for testing):
delete require.cache[require.resolve('./counter')];
const freshCounter = require('./counter'); // "Module loaded!" (reloaded)

---

2️⃣ AMD Deep Dive

AMD with RequireJS

// ═══════════════════════════════════════════════════════════════
// AMD Module Definition
// ═══════════════════════════════════════════════════════════════

// Simple module (no dependencies)
// math.js
define('math', [], function () {
  var PI = 3.14159;

  function add(a, b) {
    return a + b;
  }

  function subtract(a, b) {
    return a - b;
  }

  // Return public API
  return {
    PI: PI,
    add: add,
    subtract: subtract,
  };
});

// Module with dependencies
// calculator.js
define('calculator', ['math', 'logger'], function (math, logger) {
  // math and logger are injected as arguments

  function calculate(a, b, operation) {
    logger.log('Calculating...');

    switch (operation) {
      case '+':
        return math.add(a, b);
      case '-':
        return math.subtract(a, b);
      default:
        throw new Error('Unknown operation');
    }
  }

  return {
    calculate: calculate,
  };
});

// Anonymous module (name inferred from filename)
// utils.js
define(['jquery'], function ($) {
  function showMessage(msg) {
    $('body').append('<div class="message">' + msg + '</div>');
  }

  return { showMessage: showMessage };
});

┌─────────────────────────────────────────────────────────────────────┐
│                        AMD STRUCTURE                                │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│   define(                                                           │
│       'moduleName',           ← Optional: Module ID                 │
│       ['dep1', 'dep2'],       ← Dependencies array                  │
│       function(dep1, dep2) {  ← Factory function                    │
│           // Module code                                            │
│           return { ... };     ← Public API                          │
│       }                                                             │
│   );                                                                │
│                                                                     │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│   LOADING SEQUENCE:                                                 │
│                                                                     │
│   define('C', ['A', 'B'], factory)                                  │
│                │                                                    │
│                ▼                                                    │
│   ┌─────────────────────────────────────┐                          │
│   │  1. Parse dependency array          │                          │
│   │  2. Load A.js (async)               │                          │
│   │  3. Load B.js (async, parallel)     │                          │
│   │  4. Wait for both to complete       │                          │
│   │  5. Execute factory(A, B)           │                          │
│   │  6. Cache and return result         │                          │
│   └─────────────────────────────────────┘                          │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

Requiring AMD Modules

// ═══════════════════════════════════════════════════════════════
// Using require() in AMD
// ═══════════════════════════════════════════════════════════════

// Main entry point - app.js
require(['jquery', 'calculator', 'utils'], function ($, calculator, utils) {
  // All dependencies loaded
  $(document).ready(function () {
    var result = calculator.calculate(5, 3, '+');
    utils.showMessage('Result: ' + result);
  });
});

// Conditional loading
define(['require'], function (require) {
  function loadFeature(name, callback) {
    require(['features/' + name], function (feature) {
      callback(feature);
    });
  }

  return { loadFeature: loadFeature };
});

// CommonJS-style syntax (supported in AMD)
define(function (require, exports, module) {
  var $ = require('jquery');
  var math = require('./math');

  exports.doSomething = function () {
    // Use $ and math
  };
});

RequireJS Configuration

// ═══════════════════════════════════════════════════════════════
// requirejs.config() - Configure paths, shims, and more
// ═══════════════════════════════════════════════════════════════

requirejs.config({
  // Base URL for all module lookups
  baseUrl: '/js',

  // Path shortcuts
  paths: {
    jquery: 'lib/jquery-3.6.0.min',
    lodash: 'lib/lodash.min',
    backbone: 'lib/backbone-min',
    text: 'plugins/text', // Text plugin
    json: 'plugins/json', // JSON plugin
  },

  // Shim non-AMD libraries
  shim: {
    backbone: {
      deps: ['lodash', 'jquery'], // Load these first
      exports: 'Backbone', // Global variable to export
    },
    'jquery.plugin': {
      deps: ['jquery'],
      exports: 'jQuery.fn.plugin',
    },
    'legacy-lib': {
      exports: 'LegacyLib',
      init: function () {
        // Custom initialization
        return this.LegacyLib.noConflict();
      },
    },
  },

  // Map module IDs to other IDs
  map: {
    'some/module': {
      jquery: 'jquery-private', // Use private jQuery
    },
  },

  // Require.js plugins config
  config: {
    text: {
      useXhr: function (url, protocol, hostname, port) {
        return true; // Always use XHR
      },
    },
  },

  // Wait time before timeout (milliseconds)
  waitSeconds: 15,

  // URL arguments for cache busting
  urlArgs: 'bust=' + new Date().getTime(),
});

// Start the app
require(['app/main']);

┌─────────────────────────────────────────────────────────────────────┐
│                    REQUIREJS CONFIG OPTIONS                         │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│   ┌─────────────────────────────────────────────────────────┐      │
│   │  baseUrl: '/js'                                          │      │
│   │                                                          │      │
│   │  All module lookups start from this path                 │      │
│   │  require(['app']) → loads /js/app.js                     │      │
│   └─────────────────────────────────────────────────────────┘      │
│                                                                     │
│   ┌─────────────────────────────────────────────────────────┐      │
│   │  paths: { 'jquery': 'lib/jquery-3.6.0' }                 │      │
│   │                                                          │      │
│   │  Aliases for module paths (no .js extension!)            │      │
│   │  require(['jquery']) → loads /js/lib/jquery-3.6.0.js     │      │
│   └─────────────────────────────────────────────────────────┘      │
│                                                                     │
│   ┌─────────────────────────────────────────────────────────┐      │
│   │  shim: { 'backbone': { deps: [...], exports: '...' }}    │      │
│   │                                                          │      │
│   │  Configure non-AMD scripts:                              │      │
│   │  • deps: modules to load first                           │      │
│   │  • exports: global variable the script creates           │      │
│   │  • init: custom initialization function                  │      │
│   └─────────────────────────────────────────────────────────┘      │
│                                                                     │
│   ┌─────────────────────────────────────────────────────────┐      │
│   │  urlArgs: 'v=1.0.0'                                      │      │
│   │                                                          │      │
│   │  Append to all URLs for cache busting                    │      │
│   │  /js/app.js?v=1.0.0                                      │      │
│   └─────────────────────────────────────────────────────────┘      │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

---

3️⃣ HTML Integration

Loading AMD Modules

<!-- ═══════════════════════════════════════════════════════════════ -->
<!-- AMD with RequireJS in HTML -->
<!-- ═══════════════════════════════════════════════════════════════ -->

<!DOCTYPE html>
<html>
  <head>
    <title>AMD Example</title>
  </head>
  <body>
    <!-- Single script tag loads RequireJS and starts app -->
    <script data-main="js/main" src="js/lib/require.js"></script>

    <!-- 
        data-main="js/main" tells RequireJS:
        1. Set baseUrl to "js/"
        2. Load "js/main.js" as entry point
    -->
  </body>
</html>

<!-- ═══════════════════════════════════════════════════════════════ -->
<!-- Alternative: Inline configuration -->
<!-- ═══════════════════════════════════════════════════════════════ -->

<!DOCTYPE html>
<html>
  <head>
    <script src="js/lib/require.js"></script>
    <script>
      requirejs.config({
        baseUrl: 'js',
        paths: {
          jquery: 'lib/jquery.min',
        },
      });

      require(['app/main'], function (main) {
        main.init();
      });
    </script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

---

4️⃣ Interoperability

CommonJS in AMD

// ═══════════════════════════════════════════════════════════════
// Using CommonJS style in AMD
// ═══════════════════════════════════════════════════════════════

// AMD supports "Simplified CommonJS Wrapping"
define(function (require, exports, module) {
  // CommonJS-style requires
  var $ = require('jquery');
  var _ = require('lodash');
  var myModule = require('./myModule');

  // CommonJS-style exports
  exports.doSomething = function () {
    return _.map([1, 2, 3], (x) => x * 2);
  };

  // Or use module.exports
  module.exports = {
    doSomething: function () {
      /* ... */
    },
  };
});

AMD in Node.js

// ═══════════════════════════════════════════════════════════════
// Using AMD modules in Node.js with amdefine
// ═══════════════════════════════════════════════════════════════

// Install: npm install amdefine

// myModule.js
if (typeof define !== 'function') {
  var define = require('amdefine')(module);
}

define(['./dependency'], function (dep) {
  // This works in both AMD (browser) and CommonJS (Node.js)
  return {
    doSomething: function () {
      return dep.helper();
    },
  };
});

---

5️⃣ Migration Patterns

CommonJS to ES Modules

// ═══════════════════════════════════════════════════════════════
// Converting CommonJS to ES Modules
// ═══════════════════════════════════════════════════════════════

// ─── BEFORE: CommonJS ───
// math.js
const PI = 3.14159;

function add(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

module.exports = { PI, add, subtract };

// app.js
const math = require('./math');
const { add, PI } = require('./math');

// ─── AFTER: ES Modules ───
// math.js
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// app.js
import { PI, add, subtract } from './math.js';
// or
import * as math from './math.js';

┌─────────────────────────────────────────────────────────────────────┐
│                 CONVERSION CHEAT SHEET                              │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│   CommonJS                          ES Modules                      │
│   ────────                          ──────────                      │
│                                                                     │
│   module.exports = x;               export default x;               │
│                                                                     │
│   module.exports = { a, b };        export { a, b };                │
│                                                                     │
│   module.exports.x = y;             export const x = y;             │
│                                                                     │
│   exports.x = y;                    export const x = y;             │
│                                                                     │
│   const x = require('./m');         import x from './m.js';         │
│                                                                     │
│   const { a } = require('./m');     import { a } from './m.js';     │
│                                                                     │
│   const m = require('./m');         import * as m from './m.js';    │
│                                                                     │
│   require('./m');                   import './m.js';                │
│                                                                     │
│   const m = require(path);          const m = await import(path);   │
│                                                                     │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│   ⚠️  DIFFERENCES TO WATCH:                                        │
│                                                                     │
│   • Add .js extension (required in browsers/Node ESM)               │
│   • No __dirname/__filename (use import.meta.url)                   │
│   • No require.resolve (use import.meta.resolve)                    │
│   • No dynamic require(var) (use await import(var))                 │
│   • ESM is strict mode by default                                   │
│   • ESM has top-level await                                         │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

Dual Package Support

// ═══════════════════════════════════════════════════════════════
// package.json - Supporting both CJS and ESM
// ═══════════════════════════════════════════════════════════════

{
    "name": "my-package",
    "version": "1.0.0",

    // Main entry for CommonJS
    "main": "./dist/index.cjs",

    // Entry for ES Modules
    "module": "./dist/index.mjs",

    // Conditional exports (Node.js 12.7+)
    "exports": {
        ".": {
            "import": "./dist/index.mjs",
            "require": "./dist/index.cjs",
            "default": "./dist/index.cjs"
        },
        "./utils": {
            "import": "./dist/utils.mjs",
            "require": "./dist/utils.cjs"
        }
    },

    // TypeScript types
    "types": "./dist/index.d.ts",

    // Files to include in package
    "files": ["dist"]
}

---

6️⃣ Summary Comparison

┌─────────────────────────────────────────────────────────────────────────────────────┐
│                          COMPLETE COMPARISON                                         │
├─────────────┬────────────────────────┬────────────────────┬─────────────────────────┤
│   Feature   │      CommonJS          │        AMD         │      ES Modules         │
├─────────────┼────────────────────────┼────────────────────┼─────────────────────────┤
│   Year      │        2009            │       2010         │         2015            │
├─────────────┼────────────────────────┼────────────────────┼─────────────────────────┤
│   Designed  │      Node.js           │     Browsers       │    Everywhere           │
│   For       │     (Server)           │                    │                         │
├─────────────┼────────────────────────┼────────────────────┼─────────────────────────┤
│   Syntax    │  require()             │  define()          │  import/export          │
│             │  module.exports        │  require()         │                         │
├─────────────┼────────────────────────┼────────────────────┼─────────────────────────┤
│   Loading   │  Synchronous           │  Asynchronous      │  Async (browser)        │
│             │                        │                    │  Both (Node.js)         │
├─────────────┼────────────────────────┼────────────────────┼─────────────────────────┤
│   Analysis  │  Dynamic               │  Dynamic           │  Static                 │
│             │  (runtime)             │  (runtime)         │  (compile-time)         │
├─────────────┼────────────────────────┼────────────────────┼─────────────────────────┤
│   Tree-     │  ❌ No                 │  ❌ No             │  ✅ Yes                 │
│   Shaking   │                        │                    │                         │
├─────────────┼────────────────────────┼────────────────────┼─────────────────────────┤
│   Circular  │  Partial support       │  Supported         │  Live bindings          │
│   Deps      │  (can be undefined)    │                    │  (better handling)      │
├─────────────┼────────────────────────┼────────────────────┼─────────────────────────┤
│   Current   │  Legacy Node.js        │  Rare              │  ✅ Standard            │
│   Usage     │  Many npm packages     │  (mostly dead)     │  Recommended            │
├─────────────┼────────────────────────┼────────────────────┼─────────────────────────┤
│   Tools     │  Node.js native        │  RequireJS         │  Native browsers        │
│             │  Bundlers              │                    │  Node.js, bundlers      │
└─────────────┴────────────────────────┴────────────────────┴─────────────────────────┘

---

📚 Key Takeaways

┌─────────────────────────────────────────────────────────────────────┐
│                         KEY TAKEAWAYS                               │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│   COMMONJS:                                                         │
│   • require() / module.exports                                      │
│   • Synchronous loading (server-side)                               │
│   • Still used in Node.js, many npm packages                        │
│   • Gradually migrating to ESM                                      │
│                                                                     │
│   AMD:                                                              │
│   • define() / require()                                            │
│   • Asynchronous loading (browser-side)                             │
│   • Mostly deprecated, replaced by ESM                              │
│   • May encounter in legacy codebases                               │
│                                                                     │
│   BEST PRACTICES:                                                   │
│   • New projects: Use ES Modules                                    │
│   • Libraries: Build both ESM and CJS                               │
│   • Use package.json "exports" for dual support                     │
│   • Bundlers handle conversion between formats                      │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

---

📚 Next Steps

Continue to 14.4 Bundlers & Build Tools to learn:

• •Webpack configuration
• •Rollup for libraries
• •Vite for development
• •esbuild for speed
• •Tree-shaking optimization