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

Core Configuration

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

Core API functions for registering and managing webpack build configurations in the @builder/user-config system.

Capabilities

Apply CLI Option

Registers command-line interface options with the build system, enabling developers to customize build behavior through CLI flags.

/**
 * Register CLI options with build system
 * @param api - Build API object with registerCliOption and log methods
 * @param options - Configuration options with optional customOptionConfig
 */
function applyCliOption(api: BuildAPI, options?: CliOptionConfig): void;

interface CliOptionConfig {
  customOptionConfig?: Record<string, CliOptionDefinition>;
}

interface CliOptionDefinition {
  name: string;                 // Option name (e.g., 'https', 'analyzer')
  commands: string[];           // Applicable commands (['start'], ['build'], ['start', 'build'])
  module?: string | false;      // Module name or false to disable webpack config modification
  configWebpack?: (config: any, value: any, context: BuildContext) => void;
}

Usage Example:

const { applyCliOption } = require("@builder/user-config");

function myBuildPlugin(api, options) {
  // Register default CLI options (https, analyzer, disable-reload, etc.)
  applyCliOption(api);
  
  // Register custom CLI options
  applyCliOption(api, {
    customOptionConfig: {
      'custom-flag': {
        name: 'custom-flag',
        commands: ['start', 'build'],
        configWebpack: (config, flagValue, context) => {
          if (flagValue) {
            // Modify webpack config when --custom-flag is used
            config.optimization.minimize(false);
          }
        }
      }
    }
  });
}

Apply User Config

Registers user configuration options with the build system, allowing developers to customize build behavior through configuration files.

/**
 * Register user configuration options with build system
 * @param api - Build API object with registerUserConfig method
 * @param options - Configuration options with optional customConfigs array
 */
function applyUserConfig(api: BuildAPI, options?: UserConfigOptions): void;

interface UserConfigOptions {
  customConfigs?: UserConfigDefinition[];
}

interface UserConfigDefinition {
  name: string;                 // Config option name
  validation: string | ((value: any) => boolean);  // Validation rule
  defaultValue?: any;           // Default value if not specified
  configWebpack?: (config: any, value: any, context: BuildContext, api: BuildAPI) => void;
}

Usage Example:

const { applyUserConfig } = require("@builder/user-config");

function myBuildPlugin(api, options) {
  // Register all default user config options (33 built-in options)
  applyUserConfig(api);
  
  // Register additional custom configuration options
  applyUserConfig(api, {
    customConfigs: [
      {
        name: 'customOutput',
        validation: 'string',
        defaultValue: 'dist',
        configWebpack: (config, outputPath, context, api) => {
          config.output.path(outputPath);
        }
      }
    ]
  });
}

Get Enhanced Webpack Config

Creates an enhanced webpack configuration with build optimizations, development tools, and platform-specific settings.

/**
 * Create enhanced webpack configuration with build optimizations
 * @param api - Build API object with context
 * @param params - Configuration parameters for webpack enhancement
 * @returns Enhanced webpack configuration object
 */
function getEnhancedWebpackConfig(
  api: BuildAPI, 
  params: WebpackEnhancementParams
): WebpackConfig;

interface WebpackEnhancementParams {
  target: string;               // Target platform ('web', 'weex', 'miniapp', etc.)
  webpackConfig: any;           // Webpack-chain configuration object
  babelConfig: any;             // Babel configuration object
  libName?: string;             // Library name (default: 'rax')
}

Usage Example:

const { getEnhancedWebpackConfig } = require("@builder/user-config");

function enhanceWebpack(api, webpackConfig, babelConfig) {
  // Enhance webpack config for web target
  const enhancedConfig = getEnhancedWebpackConfig(api, {
    target: 'web',
    webpackConfig,
    babelConfig,
    libName: 'react'
  });
  
  return enhancedConfig;
}

Enhanced Features Added:

Performance Settings: Sets max asset and entry point sizes to 1MB
DefinePlugin: Adds environment variables (NODE_ENV, APP_MODE, SERVER_PORT)
ESLint Integration: Automatic ESLint reporting unless disabled
App.json Processing: Custom loader for processing app.json configuration files
Development Tools: Friendly error reporting and hot module replacement
Production Optimization: Minification and optimization for production builds

Default Config

Pre-computed default configuration values for all user configuration options.

/**
 * Default configuration values for all user config options
 * Generated from user config schema with default values applied
 */
const defaultConfig: DefaultUserConfig;

interface DefaultUserConfig {
  alias: {};
  define: {};
  devPublicPath: "/";
  filename: "[name].js";
  extensions: [".js", ".jsx", ".json", ".html", ".ts", ".tsx", ".rml"];
  modules: ["node_modules"];
  devServer: {
    disableHostCheck: true,
    compress: true,
    transportMode: "ws",
    logLevel: "silent",
    clientLogLevel: "none",
    hot: true,
    publicPath: "/",
    quiet: false,
    watchOptions: {
      ignored: /node_modules/,
      aggregateTimeout: 600
    }
  };
  mock: true;
  externals: {};
  hash: false;
  outputAssetsPath: { js: "js", css: "css" };
  outputDir: "build";
  proxy: {};
  publicPath: "/";
  browserslist: "last 2 versions, Firefox ESR, > 1%, ie >= 9, iOS >= 8, Android >= 4";
  vendor: true;
  libraryTarget: "";
  library: "";
  libraryExport: "";
  terserOptions: {};
  cssLoaderOptions: {};
  lessLoaderOptions: {};
  sassLoaderOptions: {};
  postcssrc: false;
  compileDependencies: [];
  babelPlugins: [];
  babelPresets: [];
  tsChecker: false;
  dll: false;
  dllEntry: {};
  polyfill: "entry";
  // Plus additional framework-specific defaults
}

Usage Example:

const { defaultConfig } = require("@builder/user-config");

// Access default values
console.log(defaultConfig.outputDir);     // "build"
console.log(defaultConfig.publicPath);    // "/"
console.log(defaultConfig.extensions);    // [".js", ".jsx", ".json", ...]

// Use as base for custom configuration
const customConfig = {
  ...defaultConfig,
  outputDir: 'dist',
  publicPath: '/static/'
};