A command line tool for running JavaScript scripts that use the Asynchronous Module Definition API (AMD) for declaring and using JavaScript modules and regular JavaScript script files.
—
The RequireJS r.js build system provides sophisticated optimization and bundling capabilities for AMD-based JavaScript applications. It can combine modules, minify code, optimize CSS, and generate production-ready builds with advanced dependency analysis.
The build system is configured through a comprehensive set of options that control every aspect of the optimization process.
/**
* Main build configuration interface
*/
interface BuildConfig {
// Basic build options
appDir?: string; // Application root directory
baseUrl?: string; // Base URL for modules
dir?: string; // Output directory
mainConfigFile?: string | string[]; // Main config file(s)
// Module definitions
modules?: ModuleConfig[]; // Modules to build
// Optimization options
optimize?: 'uglify' | 'uglify2' | 'closure' | 'closure.keepLines' | 'none';
optimizeCss?: string; // CSS optimization level
// Path and dependency configuration
paths?: { [key: string]: string };
packages?: PackageConfig[];
shim?: { [key: string]: ShimConfig };
map?: { [key: string]: { [key: string]: string } };
}/**
* Application directory containing source files
* @type {String}
*/
config.appDir;
/**
* Base URL for module resolution (relative to appDir)
* @type {String}
*/
config.baseUrl;
/**
* Output directory for optimized files
* @type {String}
*/
config.dir;
/**
* Keep previous build directory
* @type {Boolean}
*/
config.keepBuildDir;Example:
{
appDir: './src',
baseUrl: 'js',
dir: './dist',
keepBuildDir: false
}/**
* Main configuration file(s) to read require.config() from
* @type {String|Array}
*/
config.mainConfigFile;Example:
{
mainConfigFile: ['js/config.js', 'js/app-config.js']
}Define specific modules to build with their dependencies and optimization settings.
/**
* Array of module build configurations
* @type {Array}
*/
config.modules;
interface ModuleConfig {
name: string; // Module name/path
include?: string[]; // Additional modules to include
exclude?: string[]; // Modules to exclude
excludeShallow?: string[]; // Exclude only direct dependencies
create?: boolean; // Create module if it doesn't exist
out?: string; // Specific output file
override?: Partial<BuildConfig>; // Override options for this module
}Example:
{
modules: [
{
name: 'app/main',
include: ['app/utils', 'app/helpers'],
exclude: ['jquery']
},
{
name: 'app/admin',
include: ['app/admin/*'],
excludeShallow: ['app/common']
},
{
name: 'vendor',
create: true,
include: ['jquery', 'underscore', 'backbone']
}
]
}/**
* JavaScript optimization method
* @type {String}
*/
config.optimize; // 'uglify' | 'uglify2' | 'closure' | 'closure.keepLines' | 'none'
/**
* UglifyJS configuration options
* @type {Object}
*/
config.uglify;
/**
* UglifyJS2 configuration options
* @type {Object}
*/
config.uglify2;
/**
* Closure Compiler configuration
* @type {Object}
*/
config.closure;
/**
* Generate source maps for minified files
* @type {Boolean}
*/
config.generateSourceMaps;
/**
* Preserve license comments in output
* @type {Boolean}
*/
config.preserveLicenseComments;Example:
{
optimize: 'uglify2',
generateSourceMaps: true,
preserveLicenseComments: false,
uglify2: {
output: {
beautify: false
},
compress: {
drop_console: true,
sequences: false
},
warnings: false,
mangle: true
}
}/**
* CSS optimization method
* @type {String}
*/
config.optimizeCss; // 'standard' | 'standard.keepLines' | 'standard.keepComments' | 'none'
/**
* CSS input file for CSS-only optimization
* @type {String}
*/
config.cssIn;
/**
* CSS output file
* @type {String}
*/
config.cssOut;
/**
* URL prefix for relative CSS URLs
* @type {String}
*/
config.cssPrefix;
/**
* CSS files to ignore for @import inlining
* @type {String}
*/
config.cssImportIgnore;Example:
{
optimizeCss: 'standard',
cssPrefix: '/assets/',
cssImportIgnore: 'reset.css'
}/**
* Inline text! plugin dependencies
* @type {Boolean}
*/
config.inlineText;
/**
* Include "use strict" in built files
* @type {Boolean}
*/
config.useStrict;
/**
* Replace modules with stubs in output
* @type {Array}
*/
config.stubModules;
/**
* Remove combined files from output directory
* @type {Boolean}
*/
config.removeCombined;Example:
{
inlineText: true,
useStrict: true,
stubModules: ['text', 'json'],
removeCombined: true
}/**
* Skip inserting define() wrappers around modules
* @type {Boolean}
*/
config.skipModuleInsertion;
/**
* Normalize define() calls: 'skip' | 'all'
* @type {String}
*/
config.normalizeDirDefines;
/**
* Skip optimization of files in dir that are not built
* @type {Boolean}
*/
config.skipDirOptimize;/**
* Build pragma flags for conditional compilation
* @type {Object}
*/
config.pragmas;
/**
* Pragmas applied only during file save phase
* @type {Object}
*/
config.pragmasOnSave;
/**
* has.js feature flags for code branch trimming
* @type {Object}
*/
config.has;
/**
* has.js flags applied only during save phase
* @type {Object}
*/
config.hasOnSave;Example:
{
pragmas: {
debugExclude: true,
consoleLogExclude: true
},
has: {
'host-browser': true,
'host-node': false
}
}/**
* Namespace for require/define calls
* @type {String}
*/
config.namespace;
/**
* Wrap build output with start/end files
* @type {Object}
*/
config.wrap;Example:
{
namespace: 'MyApp',
wrap: {
start: 'js/start.frag',
end: 'js/end.frag'
}
}/**
* Find nested require() calls inside define/require
* @type {Boolean}
*/
config.findNestedDependencies;
/**
* Optimize all plugin resources as separate files
* @type {Boolean}
*/
config.optimizeAllPluginResources;
/**
* Write build summary text file
* @type {Boolean}
*/
config.writeBuildTxt;# Build with configuration file
r.js -o build.js
# Inline build options
r.js -o name=main out=main-built.js baseUrl=.
# Multiple configuration files
r.js -o build.js -o build-mobile.js/**
* Programmatic build function
* @param {Object} config - Build configuration
* @param {Function} callback - Completion callback
*/
function requirejs.optimize(config, callback);Example:
const requirejs = require('requirejs');
requirejs.optimize({
name: 'app/main',
baseUrl: 'js',
out: 'js/main-built.js'
}, function(buildResponse) {
console.log('Build completed');
console.log(buildResponse);
}, function(err) {
console.error('Build failed:', err);
});/**
* Single file output path (alternative to dir)
* @type {String}
*/
config.out;
/**
* Log level for build process
* @type {Number}
*/
config.logLevel; // 0=trace, 1=info, 2=warn, 3=error, 4=silent/**
* Create build.txt with build information
* @type {Boolean}
*/
config.writeBuildTxt;
/**
* Include file information in build output
* @type {Boolean}
*/
config.fileExclusionRegExp;// Base configuration
const baseConfig = {
appDir: './src',
baseUrl: 'js',
paths: {
'jquery': 'vendor/jquery'
}
};
// Development build
const devConfig = {
...baseConfig,
dir: './dev-build',
optimize: 'none',
generateSourceMaps: false
};
// Production build
const prodConfig = {
...baseConfig,
dir: './prod-build',
optimize: 'uglify2',
generateSourceMaps: true,
removeCombined: true
};{
// Optimize text! plugin resources
stubModules: ['text'],
// Optimize all plugin resources
optimizeAllPluginResources: true,
// Plugin-specific build settings
text: {
useXhr: function() { return true; }
}
}/**
* Complete build configuration example
*/
const buildConfig = {
// Basic settings
appDir: './src',
baseUrl: 'js',
dir: './dist',
// Main configuration
mainConfigFile: 'js/config.js',
// Modules to build
modules: [
{
name: 'app/main',
exclude: ['vendor/jquery']
},
{
name: 'vendor/libs',
create: true,
include: ['vendor/jquery', 'vendor/underscore']
}
],
// Optimization
optimize: 'uglify2',
optimizeCss: 'standard',
generateSourceMaps: true,
preserveLicenseComments: false,
// Content processing
inlineText: true,
useStrict: true,
removeCombined: true,
// Advanced features
findNestedDependencies: true,
writeBuildTxt: true,
// File exclusions
fileExclusionRegExp: /^(\.|build\.js$)/
};interface BuildConfig {
appDir?: string;
baseUrl?: string;
dir?: string;
mainConfigFile?: string | string[];
modules?: ModuleConfig[];
optimize?: 'uglify' | 'uglify2' | 'closure' | 'closure.keepLines' | 'none';
optimizeCss?: 'standard' | 'standard.keepLines' | 'standard.keepComments' | 'none';
generateSourceMaps?: boolean;
preserveLicenseComments?: boolean;
inlineText?: boolean;
useStrict?: boolean;
namespace?: string;
skipModuleInsertion?: boolean;
stubModules?: string[];
removeCombined?: boolean;
findNestedDependencies?: boolean;
optimizeAllPluginResources?: boolean;
writeBuildTxt?: boolean;
pragmas?: { [key: string]: any };
has?: { [key: string]: any };
wrap?: { start?: string; end?: string };
out?: string;
logLevel?: number;
}
interface ModuleConfig {
name: string;
include?: string[];
exclude?: string[];
excludeShallow?: string[];
create?: boolean;
out?: string;
override?: Partial<BuildConfig>;
}Install with Tessl CLI
npx tessl i tessl/npm-requirejs