0
# RequireJS
1
2
RequireJS is a JavaScript file and module loader optimized for in-browser use, but it can be used in other JavaScript environments like Node.js, Rhino, and Nashorn. The r.js project contains both the RequireJS AMD loader and a powerful command-line optimizer for building and optimizing JavaScript modules and applications.
3
4
## Package Information
5
6
- **Package Name**: requirejs
7
- **Package Type**: npm
8
- **Language**: JavaScript
9
- **Installation**: `npm install requirejs`
10
11
## Core Imports
12
13
Browser usage with script tag:
14
15
```html
16
<script src="require.js"></script>
17
```
18
19
Node.js usage:
20
21
```javascript
22
const requirejs = require('requirejs');
23
```
24
25
CommonJS in Node.js:
26
27
```javascript
28
const { requirejs, require, define } = require('requirejs');
29
```
30
31
## Basic Usage
32
33
### AMD Module Definition
34
35
```javascript
36
// Define a module with dependencies
37
define('myModule', ['jquery', 'underscore'], function($, _) {
38
return {
39
doSomething: function() {
40
console.log('Doing something with jQuery and Underscore');
41
}
42
};
43
});
44
45
// Define a simple module
46
define(function() {
47
return {
48
name: 'simple module',
49
version: '1.0.0'
50
};
51
});
52
```
53
54
### Loading Modules
55
56
```javascript
57
// Load modules and use them
58
require(['myModule'], function(myModule) {
59
myModule.doSomething();
60
});
61
62
// Configure and load
63
requirejs.config({
64
baseUrl: '/js',
65
paths: {
66
'jquery': 'lib/jquery-1.11.1.min'
67
}
68
});
69
70
require(['jquery', 'myModule'], function($, myModule) {
71
// Use jQuery and your module
72
});
73
```
74
75
### Command Line Optimization
76
77
```bash
78
# Basic optimization
79
r.js -o build.js
80
81
# Quick single file build
82
r.js -o name=main out=main-built.js baseUrl=.
83
84
# Convert CommonJS to AMD
85
r.js -convert path/to/commonjs/dir path/to/amd/dir
86
```
87
88
## Architecture
89
90
RequireJS consists of several key components:
91
92
- **AMD Loader**: Core module loading system implementing the AMD specification
93
- **Configuration System**: Flexible configuration API for paths, shims, and loader behavior
94
- **Build System**: Sophisticated optimizer and bundling system for production deployment
95
- **Plugin System**: Extensible plugin architecture for loading non-JavaScript resources
96
- **Multi-Environment**: Support for browsers, Node.js, Rhino, Nashorn, and other JavaScript engines
97
98
## Capabilities
99
100
### AMD Module Loading
101
102
Core AMD (Asynchronous Module Definition) functionality for defining and loading JavaScript modules with dependency management.
103
104
```javascript { .api }
105
// Main loader functions
106
function requirejs(deps, callback, errback, optional);
107
function require(deps, callback, errback, optional);
108
function define(name, deps, callback);
109
```
110
111
[AMD Module Loading](./amd-loader.md)
112
113
### Configuration
114
115
Comprehensive configuration system for customizing loader behavior, paths, and module resolution.
116
117
```javascript { .api }
118
function requirejs.config(config);
119
120
interface RequireConfig {
121
baseUrl?: string;
122
paths?: { [key: string]: string };
123
shim?: { [key: string]: ShimConfig };
124
map?: { [key: string]: { [key: string]: string } };
125
// ... and many more options
126
}
127
```
128
129
[Configuration](./configuration.md)
130
131
### Build System
132
133
Advanced build and optimization system for creating production-ready JavaScript bundles with minification and dependency analysis.
134
135
```javascript { .api }
136
// Build configuration interface (simplified)
137
interface BuildConfig {
138
appDir?: string;
139
baseUrl?: string;
140
dir?: string;
141
modules?: ModuleConfig[];
142
optimize?: 'uglify' | 'uglify2' | 'closure' | 'none';
143
optimizeCss?: string;
144
// ... 50+ build options
145
}
146
```
147
148
[Build System](./build-system.md)
149
150
### Command Line Interface
151
152
Command-line tools for optimization, conversion, and module management tasks.
153
154
```bash { .api }
155
# CLI Options
156
r.js [options] [script.js]
157
r.js -o build.js
158
r.js -v
159
r.js -convert sourceDir targetDir
160
```
161
162
[Command Line Interface](./command-line.md)
163
164
### Plugin System
165
166
Extensible plugin system for loading and processing non-JavaScript resources like text files, CSS, and custom content types.
167
168
```javascript { .api }
169
// Plugin interface
170
interface RequirePlugin {
171
load(name, require, onload, config);
172
normalize?(name, normalize);
173
write?(pluginName, moduleName, write, config);
174
}
175
```
176
177
[Plugin System](./plugins.md)
178
179
## Types
180
181
```javascript { .api }
182
interface ShimConfig {
183
deps?: string[]; // Dependencies for the shimmed script
184
exports?: string; // Global variable name to export
185
init?: Function; // Initialization function
186
}
187
188
interface PackageConfig {
189
name: string; // Package name
190
location?: string; // Package location path
191
main?: string; // Main module file
192
}
193
194
interface ModuleConfig {
195
name: string; // Module name/path
196
include?: string[]; // Additional modules to include
197
exclude?: string[]; // Modules to exclude
198
excludeShallow?: string[]; // Exclude only direct dependencies
199
create?: boolean; // Create module if it doesn't exist
200
out?: string; // Specific output file
201
override?: Partial<BuildConfig>; // Override options for this module
202
}
203
```