RequireJS r.js is a command-line tool and optimizer for AMD (Asynchronous Module Definition) modules. It provides both a runtime AMD loader for browser and Node.js environments, and a comprehensive build optimizer that combines scripts for optimal production delivery.
<script src="require.js"></script>
<script>
require(['main'], function(main) {
// Your app starts here
});
</script># Run AMD projects
node r.js main.js
# Build/optimize projects
node r.js -o build.js
# Get version
node r.js -v
# Convert CommonJS modules
node r.js -convert input-dir output-dir// Define a module
define(['dependency1', 'dependency2'], function(dep1, dep2) {
return {
// module exports
};
});
// Require modules
require(['module1', 'module2'], function(mod1, mod2) {
// use modules
});# Node.js
node r.js main.js
# Java/Rhino
java -classpath rhino.jar org.mozilla.javascript.tools.shell.Main r.js main.js# Create build configuration
cat > build.js << 'EOF'
({
baseUrl: "./",
name: "main",
out: "built.js",
optimize: "uglify"
})
EOF
# Run optimizer
node r.js -o build.js<!DOCTYPE html>
<html>
<head>
<script src="require.js" data-main="scripts/main"></script>
</head>
<body>
<!-- Your app content -->
</body>
</html>// scripts/main.js
require.config({
paths: {
'jquery': 'lib/jquery',
'underscore': 'lib/underscore'
}
});
require(['jquery', 'underscore'], function($, _) {
// Application code
});RequireJS r.js consists of several key components:
Core AMD (Asynchronous Module Definition) implementation providing module loading, dependency resolution, and execution management for browser and server environments.
// Global AMD functions
function require(deps: string[], callback?: Function): any;
function define(id?: string, deps?: string[], factory?: Function): void;
// Module configuration
interface RequireConfig {
baseUrl?: string;
paths?: { [key: string]: string };
packages?: PackageConfig[];
map?: { [key: string]: { [key: string]: string } };
config?: { [key: string]: any };
shim?: { [key: string]: ShimConfig };
deps?: string[];
callback?: Function;
}
function require.config(config: RequireConfig): void;Command-line tool for running AMD projects and invoking the build optimizer in Node.js and Java/Rhino environments.
# Run AMD projects
node r.js <main-script>
java -classpath rhino.jar org.mozilla.javascript.tools.shell.Main r.js <main-script>
# Build/optimize projects
node r.js -o <build-config>
java -classpath rhino.jar:closure-compiler.jar org.mozilla.javascript.tools.shell.Main r.js -o <build-config>
# Utility commands
node r.js -v # Get version
node r.js -convert <input-dir> <output-dir> # Convert CommonJS to AMDComprehensive build optimizer that analyzes AMD dependencies, combines modules, and applies minification for production deployment.
// Build configuration object
interface BuildConfig {
appDir?: string;
baseUrl?: string;
dir?: string;
modules?: ModuleConfig[];
paths?: { [key: string]: string };
packages?: PackageConfig[];
fileExclusionRegExp?: RegExp;
optimize?: "uglify" | "closure" | "none";
optimizeCss?: "standard" | "standard.keepLines" | "none";
inlineText?: boolean;
preserveLicenseComments?: boolean;
pragmas?: { [key: string]: boolean };
skipPragmas?: boolean;
findNestedDependencies?: boolean;
}
// Module configuration for builds
interface ModuleConfig {
name: string;
include?: string[];
exclude?: string[];
create?: boolean;
insertRequire?: string[];
}Flexible configuration system for module paths, packages, shims, and build settings supporting both runtime and build-time configuration.
// Runtime configuration
interface RequireConfig {
baseUrl?: string;
paths?: { [key: string]: string };
packages?: PackageConfig[];
map?: { [key: string]: { [key: string]: string } };
config?: { [key: string]: any };
shim?: { [key: string]: ShimConfig };
waitSeconds?: number;
context?: string;
deps?: string[];
callback?: Function;
}
interface PackageConfig {
name: string;
location?: string;
main?: string;
}
interface ShimConfig {
deps?: string[];
exports?: string;
init?: Function;
}Extensible plugin system for loading non-JavaScript resources and custom module types. Enables loading text files, CSS, images, and other resources through the module system.
// Plugin loading syntax
require(['pluginName!resourcePath'], function(resource) {
// Use loaded resource
});
// Plugin definition interface
interface RequirePlugin {
load(name: string, req: LocalRequire, onload: (value: any) => void, config: any): void;
normalize?(name: string, normalize: (name: string) => string): string;
write?(pluginName: string, moduleName: string, write: WriteAPI): void;
writeFile?(pluginName: string, name: string, req: LocalRequire, write: WriteFileAPI, config: any): void;
}
// Common plugin usage
require(['text!template.html'], function(html) { /* HTML template */ });
require(['css!styles.css'], function() { /* CSS loaded */ });
require(['json!data.json'], function(data) { /* JSON data */ });Comprehensive error handling system for module loading failures, dependency issues, and build-time errors.
// Error object structure
interface RequireError extends Error {
requireType: "timeout" | "nodefine" | "scripterror" | "mismatch" | "notloaded";
requireModules: string[];
originalError?: Error;
contextName?: string;
moduleName?: string;
}
// Global error handler
function requirejs.onError(err: RequireError): void;
// Module-specific error handling
require(['module'], successCallback, errorCallback);// Core AMD types
interface AMD {
define: (id?: string, deps?: string[], factory?: any) => void;
require: (deps: string[], callback?: Function) => any;
}
// RequireJS-specific extensions
interface RequireJS extends AMD {
config: (config: RequireConfig) => void;
version: string;
isBrowser: boolean;
toUrl: (moduleNamePlusExt: string) => string;
undef: (moduleName: string) => void;
defined: (moduleName: string) => boolean;
specified: (moduleName: string) => boolean;
}
// Error types
interface RequireError extends Error {
requireType: string;
requireModules: string[];
originalError?: Error;
}