tessl/npm-builder--user-config

Webpack configuration utilities providing user config and CLI option management for Ice framework build systems

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

CLI Options

Name: tessl/npm-builder--user-config
Author: tessl

Command-line options for controlling development server behavior, build analysis tools, and debugging features during start and build commands.

Capabilities

Development Server Options

CLI flags that control development server behavior and features.

interface DevelopmentServerOptions {
  /**
   * Enable HTTPS in development server
   * Generates and uses self-signed certificates automatically
   * @commands ['start']
   */
  '--https'?: boolean;
  
  /**
   * Disable hot reload functionality
   * Prevents automatic browser refresh on file changes
   * @commands ['start']
   */
  '--disable-reload'?: boolean;
  
  /**
   * Disable mock server
   * Prevents API mocking functionality from starting
   * @commands ['start']
   */
  '--disable-mock'?: boolean;
  
  /**
   * Disable automatic browser opening
   * Prevents browser from opening automatically on server start
   * @commands ['start']
   */
  '--disable-open'?: boolean;
  
  /**
   * Disable assets processing
   * Skips asset processing for faster development builds
   * @commands ['start']
   */
  '--disable-assets'?: boolean;
  
  /**
   * Enable debug runtime
   * Enables additional debugging information and runtime checks
   * @commands ['start']
   */
  '--debug-runtime'?: boolean;
}

Usage Examples:

# Start development server with HTTPS
npm start -- --https

# Start with hot reload disabled
npm start -- --disable-reload

# Start without opening browser
npm start -- --disable-open

# Start with multiple options
npm start -- --https --disable-mock --debug-runtime

Build Analysis Options

CLI flags for analyzing and debugging build output and bundle composition.

interface BuildAnalysisOptions {
  /**
   * Enable webpack bundle analyzer
   * Opens interactive bundle size analysis in browser
   * @commands ['start', 'build']
   */
  '--analyzer'?: boolean;
  
  /**
   * Specify port for bundle analyzer
   * Sets custom port for analyzer server (default: 8888)
   * @commands ['start', 'build']
   */
  '--analyzer-port'?: number;
}

Usage Examples:

# Analyze bundle during development
npm start -- --analyzer

# Analyze production build
npm run build -- --analyzer

# Use custom analyzer port
npm run build -- --analyzer --analyzer-port 9999

Build Mode Options

CLI flags for controlling build modes and behavior.

interface BuildModeOptions {
  /**
   * Set build mode
   * Controls environment-specific build optimizations
   * @commands ['start', 'build']
   */
  '--mode'?: 'development' | 'production' | string;
}

Usage Examples:

# Set specific build mode
npm start -- --mode development

# Production mode for debugging
npm run build -- --mode production

CLI Option Implementation Details

HTTPS Option

When --https flag is used, the system automatically:

Generates self-signed SSL certificates using mkcert
Configures development server to use HTTPS protocol
Sets up proper certificate trust for local development
Enables secure connections for testing PWA features

// Internal implementation reference
const httpsConfig = {
  key: fs.readFileSync(keyPath),
  cert: fs.readFileSync(certPath),
  ca: fs.readFileSync(caPath)
};

Bundle Analyzer Option

When --analyzer flag is used, the system:

Integrates webpack-bundle-analyzer plugin
Starts analyzer server on specified port (default: 8888)
Generates interactive treemap visualization
Provides detailed bundle size analysis and optimization suggestions

Hot Reload Control

When --disable-reload flag is used:

Disables webpack-dev-server hot module replacement
Prevents automatic browser refresh on file changes
Useful for debugging or when working with external tools

Mock Server Control

When --disable-mock flag is used:

Skips webpack-dev-mock setup
Disables API endpoint mocking functionality
Allows connection to real backend services during development

Debug Runtime

When --debug-runtime flag is used:

Enables additional console logging
Provides detailed build process information
Includes timing information for build steps
Useful for troubleshooting build issues

Integration with Build Configuration

CLI options integrate seamlessly with user configuration options:

// CLI options override user config when specified
module.exports = {
  // User config sets default
  mock: true,
  
  // --disable-mock CLI flag overrides this setting
  // Final effective value: false (when CLI flag used)
};

Command Applicability

Each CLI option is restricted to specific commands:

Start-only options: --https, --disable-reload, --disable-mock, --disable-open, --disable-assets, --debug-runtime
Build-only options: None currently
Universal options: --analyzer, --analyzer-port, --mode

# Valid usage
npm start -- --https          # ✓ https works with start
npm run build -- --analyzer   # ✓ analyzer works with build

# Invalid usage would be ignored
npm run build -- --https      # ✗ https ignored in build command