What are Modules?

ES Modules (short for ECMAScript Modules) are a standardized module system for JavaScript and TypeScript. They help you structure programs into separate files with explicit imports and exports. They improve readability, testability, and reuse by keeping names local to a file and only exposing what you choose.

Vite is optimized for ES Modules and includes hot module reloading, a feature that allows modules to be updated in the browser without a full page refresh. This significantly speeds up the development process by preserving the application's state and providing immediate feedback on code changes.

❌ We do not use CommonJS modules in this course. This is an older module architecture using require and module.exports.

Basic Example

Consider a module called math.ts that exports an add function and a PI constant.

// math.ts
export function add(a: number, b: number): number {
  return a + b;
}

export const PI: number = 3.14159;

We can then import the add function and PI constant from the math.ts module and use them in our main file.

// main.ts
import { add, PI } from "./math";

console.log(add(2, 3));
console.log(PI);