← Previous Next →

Modules & Tooling

JavaScript modules and tooling help organize, reuse, and optimize code in modern web development. This lesson covers the essentials of ES modules and common tools used alongside them.

Illustration of Modules & Tooling
Illustration of Modules & Tooling

💡 What Are Modules?

Modules let you split code into reusable files, each with its own scope. They improve maintainability and avoid global namespace pollution.

ES Modules (ESM)

Native JavaScript modules use import and export statements to share code between files.

Key Module Syntax
ActionSyntax Example
Export named valueexport const PI = 3.14;
Export named functionexport function sum(a, b) { return a + b; }
Import named exportsimport { PI, sum } from './math.js';
Default exportexport default class User { ... }
Import default exportimport User from './User.js';

⚠️ Module Files Must Use type="module"

To use ES modules in browsers, your script tag should be <script type="module" src="app.js"></script>. Modules run in strict mode by default.

Advantages of Modules

  • Encapsulation: Avoid global variable conflicts.
  • Reusability: Import only what you need.
  • Maintainability: Easier to navigate and update code.
  • Lazy loading: Load modules on demand for performance.

Common Tooling in Module-Based Projects

Modules are often used with build tools and bundlers to optimize and transform code for browsers.

  • Bundlers: Tools like Webpack, Rollup, and Parcel combine modules into single or smaller files for faster loading.
  • Transpilers: Babel converts modern JS syntax into versions compatible with older browsers.
  • Package Managers: npm or yarn manage third-party libraries that are often modular.
  • Linters & Formatters: ESLint and Prettier enforce code quality and style.

💡 Why Use Bundlers?

Browsers have limitations on loading many small files and older JS features. Bundlers optimize delivery by combining and transforming modules into browser-friendly code.

Example: Export and Import

File: math.js

📌 Deep Dive: math.js Module

JAVASCRIPT
export const PI = 3.14159;

export function circleArea(radius) {
  return PI * radius * radius;
}

export default function squareArea(side) {
  return side * side;
}

File: app.js

📌 Deep Dive: Importing from math.js

JAVASCRIPT
import squareArea, { PI, circleArea } from './math.js';

console.log('PI:', PI);
console.log('Circle area (r=3):', circleArea(3));
console.log('Square area (side=4):', squareArea(4));
Output
PI: 3.14159 Circle area (r=3): 28.27431 Square area (side=4): 16

Module Resolution & File Extensions

By default, import paths need file extensions in browsers (./module.js). Node.js supports extensionless imports with certain settings.

⚠️ Relative vs Package Imports

Relative imports use ./ or ../. Package imports (like lodash) come from node_modules and require a bundler or Node.js environment.

Summary

  • ES Modules use export and import to share code.
  • Modules improve code organization and reuse.
  • Tooling like bundlers and transpilers optimize and ensure compatibility.
  • Use type="module" in browsers for native module support.
← Previous Next →