CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-requirejs

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.

Pending
Overview
Eval results
Files

build-system.mddocs/

Build System

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.

Capabilities

Build Configuration

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 } };
}

Core Build Options

Directory Configuration

/**
 * 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
}

Configuration File Loading

/**
 * Main configuration file(s) to read require.config() from
 * @type {String|Array}
 */
config.mainConfigFile;

Example:

{
    mainConfigFile: ['js/config.js', 'js/app-config.js']
}

Module Configuration

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']
        }
    ]
}

Optimization Configuration

JavaScript Optimization

/**
 * 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

/**
 * 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'
}

Content Processing Options

Text and Resource Handling

/**
 * 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
}

Module Processing

/**
 * 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;

Advanced Build Features

Conditional Compilation

/**
 * 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 and Wrapping

/**
 * 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'
    }
}

Dependency Analysis

/**
 * 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 Execution

Command Line Usage

# 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 API

/**
 * 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);
});

Build Output and Logging

Output Options

/**
 * 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

Build Information

/**
 * Create build.txt with build information
 * @type {Boolean}
 */
config.writeBuildTxt;

/**
 * Include file information in build output
 * @type {Boolean}
 */
config.fileExclusionRegExp;

Environment-Specific Builds

Multi-Environment Configuration

// 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
};

Plugin Resource Optimization

{
    // Optimize text! plugin resources
    stubModules: ['text'],
    
    // Optimize all plugin resources
    optimizeAllPluginResources: true,
    
    // Plugin-specific build settings
    text: {
        useXhr: function() { return true; }
    }
}

Complete Build Example

/**
 * 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$)/
};

Types

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

docs

amd-loader.md

build-system.md

command-line.md

configuration.md

index.md

plugins.md

tile.json