Working with Classic Modules

Working with Classic Modules (JavaScript)

In the world of JavaScript, modules help split code into smaller, reusable parts. Before the introduction of ES6 modules (import/export), developers relied on Classic Modules like:

• CommonJS

• AMD

• UMD

These are still used today in many environments like Node.js, older projects, and legacy browsers.

Let’s learn how to work with classic modules.

---

What Are Classic Modules?

Classic modules are systems created before JavaScript had built-in module support.

They help:

• Organize code

• Reuse logic

• Load only what you need

3 Most Common Classic Module Systems:

1. CommonJS – used in Node.js

2. AMD (Asynchronous Module Definition) – used in browsers

3. UMD (Universal Module Definition) – works in both environments

---

 1. CommonJS (Node.js)

CommonJS is the standard module format for Node.js.

Example File: math.js

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

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

// Export the functions
module.exports = {
  add,
  subtract
};

Using the Module: main.js

const math = require('./math');

console.log(math.add(5, 3));        // 8
console.log(math.subtract(10, 4));  // 6

CommonJS loads synchronously. Great for servers, not for browsers.

---

2. AMD (Asynchronous Module Definition)

AMD was designed for browsers to load modules asynchronously.

Popularized by tools like RequireJS.

Define a Module:

// math.js
define([], function() {
  return {
    add: function(a, b) { return a + b; },
    subtract: function(a, b) { return a - b; }
  };
});

Use the Module:

require(['math'], function(math) {
  console.log(math.add(2, 3));      // 5
});

AMD works well in the browser — loads files in parallel.

---

 3. UMD (Universal Module Definition)

UMD is a hybrid that works in both Node.js and browsers.

 Example:

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define([], factory);
  } else if (typeof module === 'object' && module.exports) {
    // CommonJS
    module.exports = factory();
  } else {
    // Browser global
    root.myModule = factory();
  }
}(typeof self !== 'undefined' ? self : this, function () {
  function greet(name) {
    return 'Hello, ' + name;
  }

  return {
    greet
  };
}));

This module works in all environments: AMD, CommonJS, and browser global.

---

Why Use Classic Modules?

Even today, you may use classic modules if:

• Working with Node.js projects

• Using older JavaScript codebases

• Building code that must run in legacy browsers

• Working with libraries written in CommonJS or AMD

• Using bundlers like Webpack (which still support these)

---

Tools That Use Classic Modules

Tool	Uses Which Module Type?
Node.js	CommonJS
RequireJS	AMD
Webpack	Supports all types
Babel	Can convert ES6 to CommonJS
Browserify	Converts CommonJS for browser use

---

Export Patterns in Classic Modules

Single Function Export

module.exports = function greet(name) {
  return 'Hello, ' + name;
};

Multiple Named Exports

module.exports = {
  greet,
  sayBye
};

Conditional Export

if (isBrowser) {
  define([], function() {
    return myModule;
  });
} else {
  module.exports = myModule;
}

---

Importing in Classic Modules

CommonJS:

const greet = require('./greet');

AMD:

require(['greet'], function(greet) {
  greet('Alice');
});

---

Module Directory Structure

Organize classic modules like this:

project/
  lib/
    math.js
    logger.js
  main.js

Use relative paths for CommonJS (require('./lib/math')) and module names for AMD.

---

Tips When Working with Classic Modules

Tip	Why It Helps
Stick to one module system	Avoid confusion in legacy projects
Use UMD for wide compatibility	Works in Node + browsers
Bundle with Webpack or Browserify	Makes CommonJS usable in browsers
Use exports shorthand	Cleaner syntax in CommonJS
Document dependencies	Helps future devs understand structure

---

Classic Modules vs ES Modules

Feature	Classic Modules	ES Modules (ES6+)
Syntax	require, module.exports	import, export
Supported in	Node.js, old browsers	Modern browsers & Node
Load Type	Sync (CJS) / Async (AMD)	Always async
Tooling	Webpack, RequireJS	Native in browsers (modern)
Tree Shaking	No	Yes (in bundlers)

---

Migrating to ES Modules (Optional)

Many teams are now moving from CommonJS to ES Modules.

CommonJS:

const greet = require('./greet');

ES Module:

import greet from './greet.js';

To enable ES Modules in Node.js, use:

• "type": "module" in package.json

• File extensions .mjs or .js

---

Summary

Classic Module	Where It's Used	Syntax Example
CommonJS	Node.js	require() / module.exports
AMD	Browsers (via RequireJS)	define() / require()
UMD	Universal	Works in CJS + AMD + global

Learn Tosca Course

Read More

Tosca Standard Modules Explained

Tosca Standard Modules Explained

Static vs Dynamic Modules in Tosca

How to Create and Reuse Modules in Tosca