or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

amd-loading.mdbuild-system.mdcommand-line.mdconfiguration.mderror-handling.mdindex.mdplugin-system.md
tile.json

build-system.mddocs/

Build System & Optimization

Comprehensive build optimizer that analyzes AMD dependencies, combines modules, and applies minification for production deployment.

Capabilities

Build Configuration

Define build targets, optimization settings, and output configuration.

/**
 * Main build configuration object
 */
interface BuildConfig {
  /** Source application directory to copy from */
  appDir?: string;
  
  /** Base URL for module resolution */
  baseUrl?: string;
  
  /** Output directory for built files */
  dir?: string;
  
  /** Array of module build configurations */
  modules?: ModuleConfig[];
  
  /** Single module build (alternative to modules array) */
  name?: string;
  out?: string;
  
  /** Path mappings for module names */
  paths?: { [key: string]: string };
  
  /** Package configurations */
  packages?: PackageConfig[];
  
  /** Files to exclude from build */
  fileExclusionRegExp?: RegExp;
  
  /** Directories to exclude from build */
  dirExclusionRegExp?: RegExp;
  
  /** JavaScript optimization method */
  optimize?: "uglify" | "closure" | "none";
  
  /** CSS optimization method */
  optimizeCss?: "standard" | "standard.keepLines" | "standard.keepComments" | "none";
  
  /** Inline text plugin resources */
  inlineText?: boolean;
  
  /** Preserve license comments in optimized files */
  preserveLicenseComments?: boolean;
  
  /** Build-time pragma configuration */
  pragmas?: { [key: string]: boolean };
  
  /** Skip pragma processing */
  skipPragmas?: boolean;
  
  /** Find nested require() calls in non-AMD code */
  findNestedDependencies?: boolean;
  
  /** Remove combined files after build */
  removeCombined?: boolean;
  
  /** Optimize all plugin resources */
  optimizeAllPluginResources?: boolean;
  
  /** Wrap built code with start/end text */
  wrap?: {
    start: string;
    end: string;
  } | {
    startFile: string;
    endFile: string;
  } | boolean;
  
  /** Add namespace to define() calls */
  namespace?: string;
  
  /** Modules to preserve from optimization (usually plugins) */
  stubModules?: string[];
  
  /** Build lifecycle callbacks */
  onBuildRead?(moduleName: string, path: string, contents: string): string;
  onBuildWrite?(moduleName: string, path: string, contents: string): string;
}

interface ModuleConfig {
  /** Module name/path */
  name: string;
  
  /** Modules to include in this build */
  include?: string[];
  
  /** Modules to exclude from this build */
  exclude?: string[];
  
  /** Create module even if no dependencies found */
  create?: boolean;
  
  /** Add require() calls for these modules */
  insertRequire?: string[];
  
  /** Override output path for this module */
  out?: string;
}

Usage Examples:

// build.js - Single module build
({
  baseUrl: "scripts",
  name: "main",
  out: "scripts/main-built.js",
  optimize: "uglify",
  preserveLicenseComments: false
})

// Multi-module build with app directory
({
  appDir: "src",
  baseUrl: "scripts", 
  dir: "dist",
  modules: [
    {
      name: "main",
      exclude: ["jquery"]
    },
    {
      name: "admin/main",
      include: ["admin/users", "admin/reports"]
    }
  ],
  paths: {
    "jquery": "lib/jquery-1.8.2.min"
  },
  optimize: "uglify"
})

// CSS optimization build
({
  appDir: "src",
  dir: "dist", 
  baseUrl: "js",
  optimizeCss: "standard.keepLines",
  modules: [
    { name: "main" }
  ]
})

Module Analysis

Analyze AMD dependencies and create build graphs.

/**
 * Dependency analysis results
 */
interface DependencyAnalysis {
  /** All discovered modules */
  modules: string[];
  
  /** Dependency graph */
  dependencies: { [module: string]: string[] };
  
  /** Circular dependencies found */
  circular: string[][];
  
  /** Plugin resources */
  pluginResources: { [plugin: string]: string[] };
  
  /** Non-AMD files requiring shim */
  shimmed: string[];
}

/**
 * Build layer information
 */
interface BuildLayer {
  /** Layer name */
  name: string;
  
  /** Included modules */
  modules: string[];
  
  /** Layer file size */
  size: number;
  
  /** Optimization applied */
  optimized: boolean;
}

Usage Examples:

// Build configuration with dependency analysis
({
  baseUrl: "app",
  name: "main",
  out: "build/main.js",
  
  // Find all nested dependencies
  findNestedDependencies: true,
  
  // Include common dependencies
  include: [
    "common/utils",
    "common/ajax"
  ],
  
  // Exclude libraries loaded separately
  exclude: [
    "jquery",
    "backbone"
  ],
  
  // Trace path for debugging
  logLevel: 0,
  
  onBuildRead: function(moduleName, path, contents) {
    console.log("Processing:", moduleName);
    return contents;
  },
  
  onBuildWrite: function(moduleName, path, contents) {
    console.log("Writing:", moduleName, "Size:", contents.length);
    return contents;
  }
})

Optimization Engines

Configure JavaScript and CSS minification and optimization.

/**
 * UglifyJS optimization configuration
 */
interface UglifyConfig {
  /** Optimization level */
  optimize: "uglify";
  
  /** UglifyJS-specific options */
  uglify?: {
    /** Mangle variable names */
    mangle?: boolean;
    
    /** Remove dead code */
    dead_code?: boolean;
    
    /** Compress expressions */
    squeeze?: boolean;
    
    /** Beautify output */
    beautify?: boolean;
    
    /** Maximum line length */
    max_line_len?: number;
  };
}

/**
 * Google Closure Compiler configuration
 */
interface ClosureConfig {
  /** Optimization level */
  optimize: "closure";
  
  /** Closure Compiler options */
  closure?: {
    /** Compilation level */
    compilation_level?: "WHITESPACE_ONLY" | "SIMPLE_OPTIMIZATIONS" | "ADVANCED_OPTIMIZATIONS";
    
    /** Language input */
    language_in?: "ECMASCRIPT3" | "ECMASCRIPT5" | "ECMASCRIPT5_STRICT";
    
    /** Warning level */
    warning_level?: "QUIET" | "DEFAULT" | "VERBOSE";
  };
}

/**
 * CSS optimization configuration  
 */
interface CssOptimizeConfig {
  /** CSS optimization method */
  optimizeCss: "standard" | "standard.keepLines" | "standard.keepComments" | "none";
  
  /** CSS import handling */
  cssImportIgnore?: string;
}

Usage Examples:

// UglifyJS optimization
({
  baseUrl: "src",
  name: "main",
  out: "dist/main.js",
  optimize: "uglify",
  uglify: {
    mangle: true,
    dead_code: true,
    beautify: false,
    max_line_len: 1000
  },
  preserveLicenseComments: true
})

// Closure Compiler optimization
({
  baseUrl: "src", 
  name: "main",
  out: "dist/main.js",
  optimize: "closure",
  closure: {
    compilation_level: "SIMPLE_OPTIMIZATIONS",
    language_in: "ECMASCRIPT5",
    warning_level: "DEFAULT"
  }
})

// CSS optimization
({
  appDir: "src",
  dir: "dist",
  baseUrl: "js",
  optimizeCss: "standard.keepLines",
  cssImportIgnore: "normalize.css",
  modules: [
    { name: "main" }
  ]
})

Plugin Processing

Handle RequireJS plugins during build process.

/**
 * Plugin build configuration
 */
interface PluginBuildConfig {
  /** Inline all plugin resources */
  inlineText?: boolean;
  
  /** Optimize all plugin resources */
  optimizeAllPluginResources?: boolean;
  
  /** Plugin-specific build handling */
  pluginBuildHandlers?: {
    [pluginName: string]: PluginBuildHandler;
  };
}

interface PluginBuildHandler {
  /** Write plugin resource inline */
  writeFile?(pluginName: string, moduleName: string, req: any, write: Function): void;
}

/**
 * Common plugins and their build behavior
 */
interface CommonPlugins {
  /** Text plugin - inline templates/text files */
  "text": {
    /** File extensions to process */
    extensions: string[];
    /** Whether to inline during build */
    inline: boolean;
  };
  
  /** i18n plugin - internationalization */
  "i18n": {
    /** Locale to build for */
    locale: string;
    /** Available locales */
    availableLocales: string[];
  };
  
  /** CSS plugin - load CSS files */
  "css": {
    /** Whether to inline CSS */
    inline: boolean;
    /** CSS optimization */
    optimize: boolean;
  };
}

Usage Examples:

// Text plugin inlining
({
  baseUrl: "src",
  name: "main", 
  out: "dist/main.js",
  inlineText: true,
  
  // Modules using text plugin
  paths: {
    "text": "lib/require-text"
  }
})

// Custom plugin handling
({
  baseUrl: "src",
  name: "main",
  out: "dist/main.js",
  
  optimizeAllPluginResources: true,
  
  pluginBuildHandlers: {
    "myPlugin": {
      writeFile: function(pluginName, moduleName, req, write) {
        // Custom plugin build logic
        var processed = processMyPlugin(moduleName);
        write(moduleName, processed);
      }
    }
  }
})

Build Pragmas

Use build-time conditionals to include/exclude code.

/**
 * Pragma configuration
 */
interface PragmaConfig {
  /** Pragma values */
  pragmas?: { [key: string]: boolean };
  
  /** Skip all pragma processing */
  skipPragmas?: boolean;
  
  /** Custom pragma processors */
  pragmasOnSave?: { [key: string]: Function };
}

/**
 * Pragma syntax in source code
 */
interface PragmaSyntax {
  /** Conditional inclusion */
  ">>includeStart(\"pragmaName\", pragmaValue)": void;
  ">>includeEnd(\"pragmaName\")": void;
  
  /** Conditional exclusion */
  ">>excludeStart(\"pragmaName\", pragmaValue)": void;
  ">>excludeEnd(\"pragmaName\")": void;
}

Usage Examples:

// Build configuration with pragmas
({
  baseUrl: "src",
  name: "main",
  out: "dist/main.js",
  
  pragmas: {
    production: true,
    debug: false,
    experimental: false
  }
})

// Source code with pragmas
define(function() {
  var api = {
    version: "1.0.0"
  };
  
  //>>includeStart("debug", pragmas.debug)
  api.debug = function(msg) {
    console.log("DEBUG:", msg);
  };
  //>>includeEnd("debug")
  
  //>>excludeStart("production", pragmas.production)
  // Development-only code
  api.mockData = { /* mock data */ };
  //>>excludeEnd("production")
  
  return api;
});

Build Lifecycle Hooks

Hook into the build process for custom processing.

/**
 * Build lifecycle hooks
 */
interface BuildHooks {
  /** Called when reading a module file */
  onBuildRead?(moduleName: string, path: string, contents: string): string;
  
  /** Called when writing a built file */
  onBuildWrite?(moduleName: string, path: string, contents: string): string;
  
  /** Called after build completion */
  onBuildComplete?(data: BuildSummary): void;
}

interface BuildSummary {
  /** Build statistics */
  modules: number;
  totalSize: number;
  optimizedSize: number;
  compressionRatio: number;
  
  /** Build timing */
  startTime: Date;
  endTime: Date;
  duration: number;
  
  /** Error/warning information */
  errors: string[];
  warnings: string[];
}

Usage Examples:

// Build with lifecycle hooks
({
  baseUrl: "src",
  name: "main", 
  out: "dist/main.js",
  
  onBuildRead: function(moduleName, path, contents) {
    console.log("Reading:", moduleName);
    
    // Add custom transformations
    if (moduleName.endsWith("config")) {
      contents = contents.replace(/ENVIRONMENT/g, "production");
    }
    
    return contents;
  },
  
  onBuildWrite: function(moduleName, path, contents) {
    console.log("Writing:", moduleName, "(" + contents.length + " bytes)");
    
    // Add banner comment
    if (moduleName === "main") {
      contents = "/*! Built: " + new Date().toISOString() + " */\n" + contents;
    }
    
    return contents;
  },
  
  onBuildComplete: function(data) {
    console.log("Build completed!");
    console.log("Modules:", data.modules);
    console.log("Original size:", data.totalSize);
    console.log("Optimized size:", data.optimizedSize);
    console.log("Compression:", Math.round(data.compressionRatio * 100) + "%");
    
    if (data.errors.length > 0) {
      console.error("Errors:", data.errors);
    }
  }
})

Advanced Build Patterns

Complex build configurations for large applications.

/**
 * Multi-layer build configuration
 */
interface MultiLayerBuild {
  /** Common/shared layer */
  common: ModuleConfig;
  
  /** Application-specific layers */
  apps: ModuleConfig[];
  
  /** Library layers */
  libs: ModuleConfig[];
}

/**
 * Conditional builds
 */
interface ConditionalBuild {
  /** Environment-specific configurations */
  environments: {
    [env: string]: Partial<BuildConfig>;
  };
  
  /** Feature flags */
  features: {
    [feature: string]: boolean;
  };
}

Usage Examples:

// Multi-layer architecture
({
  appDir: "src",
  baseUrl: "js",
  dir: "dist",
  
  modules: [
    // Common libraries layer
    {
      name: "common",
      include: [
        "jquery",
        "underscore", 
        "backbone",
        "common/utils",
        "common/models"
      ]
    },
    
    // Main application layer  
    {
      name: "app/main",
      exclude: ["common"]
    },
    
    // Admin panel layer
    {
      name: "admin/main", 
      exclude: ["common"]
    },
    
    // Mobile-specific layer
    {
      name: "mobile/main",
      exclude: ["common"],
      include: ["mobile/touch", "mobile/geo"]
    }
  ]
})

// Environment-specific builds
var config = {
  baseUrl: "src",
  name: "main",
  paths: {
    "config": "config/base"
  }
};

// Override for production
if (process.env.NODE_ENV === "production") {
  config.out = "dist/main.min.js";
  config.optimize = "uglify";
  config.paths.config = "config/production";
  config.pragmas = {
    production: true,
    debug: false
  };
} else {
  config.out = "dist/main.js"; 
  config.optimize = "none";
  config.paths.config = "config/development";
  config.pragmas = {
    production: false,
    debug: true
  };
}

// Export configuration
module.exports = config;

Types

// Build result types
interface BuildResult {
  success: boolean;
  modules: string[];
  layers: BuildLayer[];
  errors: BuildError[];
  warnings: string[];
  stats: BuildStats;
}

interface BuildError {
  type: "dependency" | "syntax" | "plugin" | "file";
  module: string;
  message: string;
  line?: number;
  column?: number;
}

interface BuildStats {
  totalModules: number;
  totalSize: number;
  optimizedSize: number;
  compressionRatio: number;
  buildTime: number;
}

// File processing types
interface FileProcessor {
  (content: string, path: string, config: BuildConfig): string;
}

interface ModuleTransform {
  (moduleContent: string, moduleName: string): string;
}