Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Modules are files that export code (functions, objects, variables) so other files can import and use them. Think of them as LEGO pieces - each piece does something specific, and you connect them together!
The old way (Node.js)
2009 - for Node.js before ES6 existed
Node.js default (legacy code), npm packages
Synchronous (blocking) - loads entire file at once
❌ Doesn't work natively (needs bundler)
.js (default in Node.js without "type": "module")
The modern way (standard)
2015 - part of ES6 (ES2015) standard
Modern projects, browsers, new Node.js code
Asynchronous - can load modules in parallel
✅ Works natively in modern browsers!
.mjs or .js (with "type": "module" in package.json)
// math.js - export functions
// Method 1: Export one thing
module.exports = function add(a, b) {
return a + b;
};
// Method 2: Export multiple things
module.exports = {
add: function(a, b) {
return a + b;
},
subtract: function(a, b) {
return a - b;
}
};
// Method 3: Export as you go
exports.add = function(a, b) {
return a + b;
};
exports.subtract = function(a, b) {
return a - b;
};// app.js - import and use
// Import entire module
const math = require('./math');
console.log(math.add(5, 3)); // 8
// Import with destructuring
const { add, subtract } = require('./math');
console.log(add(10, 2)); // 12
console.log(subtract(10, 2)); // 8
// Import built-in Node modules
const fs = require('fs');
const http = require('http');
// Import npm packages
const express = require('express');
const lodash = require('lodash');// math.js - export functions
// Named exports (can have multiple)
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
export const PI = 3.14159;
// Or export all at once
function multiply(a, b) {
return a * b;
}
function divide(a, b) {
return a / b;
}
export { multiply, divide };
// Default export (only one per file)
export default function calculator() {
return {
add, subtract, multiply, divide
};
}// app.js - import and use
// Import specific named exports
import { add, subtract } from './math.js';
console.log(add(5, 3)); // 8
// Import with alias
import { add as addition } from './math.js';
console.log(addition(5, 3)); // 8
// Import everything as namespace
import * as math from './math.js';
console.log(math.add(5, 3)); // 8
console.log(math.PI); // 3.14159
// Import default export
import calculator from './math.js';
const calc = calculator();
// Mix default and named
import calculator, { add, PI } from './math.js';
// Import for side effects only
import './setup.js'; // Runs the file<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>ES Modules Demo</title>
</head>
<body>
<h1>ES Modules in Browser</h1>
<!-- ✅ Notice type="module" -->
<script type="module">
// Can use import directly in browser!
import { add, subtract } from './math.js';
console.log(add(10, 5)); // 15
console.log(subtract(10, 5)); // 5
</script>
<!-- Or import from external file -->
<script type="module" src="./app.js"></script>
</body>
</html>
/* app.js */
import { add } from './math.js';
document.body.innerHTML = `
<h2>Result: ${add(5, 3)}</h2>
`;
// ⚠️ Important notes:
// 1. Must include .js extension
// 2. Must be served via HTTP (not file://)
// 3. Modules run in strict mode automatically
// 4. Modules are deferred by default// Option 1: Add "type": "module" to package.json
{
"name": "my-project",
"version": "1.0.0",
"type": "module", // ← This enables ES modules
"main": "index.js"
}
// Now all .js files use ES modules by default
// math.js
export function add(a, b) {
return a + b;
}
// app.js
import { add } from './math.js'; // Note: .js required!
console.log(add(5, 3));
// Option 2: Use .mjs file extension
// math.mjs
export function add(a, b) {
return a + b;
}
// app.mjs
import { add } from './math.mjs';
console.log(add(5, 3));
// Mix CommonJS and ES Modules
// CommonJS file: utils.cjs
module.exports = {
helper: function() { }
};
// ES Module file: app.mjs
import { createRequire } from 'module';
const require = createRequire(import.meta.url);
const utils = require('./utils.cjs');Don't mix require with export, or import with module.exports
// ❌ BAD - mixed syntax
import { add } from './math.js';
module.exports = {}; // Wrong!ES Modules need .js extension (CommonJS doesn't)
// ❌ BAD
import { add } from './math'; // Missing .js!
// ✅ GOOD
import { add } from './math.js';require doesn't work in browsers (needs bundler)
// ❌ BAD in browser
const lib = require('./library'); // Error!
// ✅ GOOD
import lib from './library.js';CommonJS (old, Node.js)
ES Modules (new, standard)
Modern standard for new code
import/export syntax
ES Modules work natively
CommonJS needs bundler
Both work in Node.js
Add "type": "module" for ESM