RequireJS — AMD Module Loader and Optimizer for JavaScript

Introduction

RequireJS is a JavaScript module loader that implements the AMD (Asynchronous Module Definition) specification. It was one of the first tools to bring modular JavaScript development to the browser, loading scripts asynchronously and resolving dependency graphs at runtime before native ES modules existed.

What RequireJS Does

• Loads JavaScript modules asynchronously in the browser based on dependency declarations
• Implements the AMD define() and require() API for modular code organization
• Includes r.js, an optimizer that traces dependencies and concatenates them into optimized bundles
• Supports loader plugins for loading text templates, CSS, JSON, and other non-JS resources
• Provides shim configuration for wrapping non-AMD libraries as modules

Architecture Overview

RequireJS maintains a module registry and a dependency graph. When require() is called, it resolves module paths using configurable base URLs and path mappings, loads scripts via dynamic script tag insertion, and invokes factory functions once all dependencies are satisfied. The r.js optimizer performs static analysis of the dependency tree to produce concatenated production builds.

Self-Hosting & Configuration

• Include require.js with a data-main attribute pointing to your entry module
• Configure paths, shims, and base URL in a requirejs.config() call
• Use r.js for production builds that concatenate and minify modules
• Set up path aliases to map module names to file locations or CDN URLs
• Integrate with Node.js using the requirejs npm package for server-side AMD

Key Features

• Asynchronous script loading with automatic dependency ordering
• r.js optimizer for production concatenation and minification
• Loader plugins (text!, css!, json!) for non-JavaScript resources
• Shim configuration for integrating traditional global-variable libraries
• Error callbacks and timeout handling for failed module loads

Comparison with Similar Tools

• Browserify — CommonJS bundler that processes require() at build time rather than loading at runtime
• webpack — Full-featured module bundler supporting CommonJS, AMD, and ESM with code splitting and asset handling
• SystemJS — Universal module loader supporting AMD, CommonJS, and ES modules with import maps
• Native ES Modules — Browser-native import/export with static analysis; the modern standard that superseded AMD

FAQ

Q: Is RequireJS still used? A: RequireJS is in maintenance mode. Native ES modules and bundlers like webpack and Vite have replaced it for new projects, but legacy codebases may still rely on it.

Q: What is the difference between AMD and CommonJS? A: AMD (define/require) was designed for asynchronous browser loading. CommonJS (require/exports) was designed for synchronous server-side use in Node.js. Bundlers later made CommonJS work in browsers too.

Q: How does r.js differ from webpack? A: r.js traces AMD dependencies and concatenates them into one or more bundles. webpack is a more general-purpose bundler that handles multiple module formats, code splitting, and asset processing.

Q: Can I gradually migrate from RequireJS to ES modules? A: Yes. Many bundlers can consume AMD modules alongside ES modules. You can convert files incrementally from define() to import/export syntax.

Sources

• https://github.com/requirejs/requirejs
• https://requirejs.org/