CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-tarojs--cli

Command-line interface tool for Taro, a cross-platform framework that enables developers to build apps for Mini Programs, Web, and mobile platforms

Pending
Overview
Eval results
Files

configuration.mddocs/

Configuration

Type-safe configuration system with environment-specific overrides and webpack merge capabilities.

Capabilities

Configuration Definition

Core function for defining Taro project configuration with type safety and IDE support.

/**
 * Define Taro project configuration with type safety
 * @param config - Configuration object, function, or promise
 * @returns The same configuration for Taro consumption
 */
function defineConfig<T extends CompilerTypes = CompilerWebpackTypes>(
  config: UserConfigExport<T>
): UserConfigExport<T>;

Usage Examples:

import { defineConfig } from "@tarojs/cli";

// Static configuration
export default defineConfig({
  projectName: 'my-app',
  framework: 'react',
  compiler: 'webpack5',
  // ... other config options
});

// Dynamic configuration with environment
export default defineConfig((merge, { command, mode }) => {
  const baseConfig = {
    projectName: 'my-app',
    framework: 'react' as const,
    compiler: 'webpack5' as const,
  };

  if (mode === 'development') {
    return merge(baseConfig, {
      devServer: {
        port: 3000,
      },
    });
  }

  return baseConfig;
});

// Async configuration
export default defineConfig(async () => {
  const config = await loadExternalConfig();
  return {
    projectName: config.name,
    framework: 'vue3',
    // ... other config
  };
});

Configuration Types

Type definitions for configuration objects, functions, and environment context.

/**
 * Configuration environment context
 */
interface ConfigEnv {
  /** Current Taro command being executed */
  command: string;
  /** Current build mode (development, production, etc.) */
  mode: string;
}

/**
 * Webpack merge function type for combining configurations
 */
type WebpackMerge = (...configs: Array<object | null | undefined>) => object;

/**
 * Configuration function type with merge utilities
 */
type UserConfigFn<T extends CompilerTypes = CompilerWebpackTypes> = (
  merge: WebpackMerge,
  env: ConfigEnv
) => IProjectConfig<T> | Promise<IProjectConfig<T>>;

/**
 * Union type for all valid configuration exports
 */
type UserConfigExport<T extends CompilerTypes = CompilerWebpackTypes> = 
  | IProjectConfig<T> 
  | Promise<IProjectConfig<T>> 
  | UserConfigFn<T>;

Project Configuration Interface

Complete interface for Taro project configuration covering all build and runtime options.

/**
 * Complete Taro project configuration interface
 */
interface IProjectConfig<T extends CompilerTypes = CompilerWebpackTypes> {
  /** Project name */
  projectName: string;
  
  /** Build and compilation settings */
  framework: FrameworkType;
  compiler: T;
  sourceRoot?: string;
  outputRoot?: string;
  
  /** Platform-specific configurations */
  h5?: H5Config;
  weapp?: WeappConfig;
  alipay?: AlipayConfig;
  swan?: SwanConfig;
  tt?: TTConfig;
  qq?: QQConfig;
  jd?: JDConfig;
  rn?: RNConfig;
  
  /** Plugin configuration */
  plugins?: (string | [string, object])[];
  presets?: (string | [string, object])[];
  
  /** Environment and build options */
  env?: Record<string, any>;
  defineConstants?: Record<string, any>;
  alias?: Record<string, string>;
  
  /** Optimization settings */
  terser?: TerserConfig;
  csso?: CssoConfig;
  
  /** Development server */
  devServer?: DevServerConfig;
  
  /** File system options */
  copy?: CopyConfig;
  
  /** Framework-specific options */
  react?: ReactConfig;
  vue?: VueConfig;
  
  /** Compiler-specific options */
  webpack5?: WebpackConfig;
  vite?: ViteConfig;
  esbuild?: EsbuildConfig;
}

Platform Configurations

Platform-specific configuration options for different target environments.

/**
 * H5 platform configuration
 */
interface H5Config {
  /** Public path for assets */
  publicPath?: string;
  /** Static directory path */
  staticDirectory?: string;
  /** HTML chunk loading timeout */
  chunkLoadingTimeout?: number;
  /** Enable service worker */
  enableExtract?: boolean;
  /** Router configuration */
  router?: {
    mode?: 'hash' | 'browser';
    basename?: string;
  };
  /** Development server options */
  devServer?: DevServerConfig;
}

/**
 * WeChat Mini Program configuration
 */
interface WeappConfig {
  /** Mini program compile type */
  compile?: {
    exclude?: string[];
    include?: string[];
  };
  /** Enable source map */
  enableSourceMap?: boolean;
  /** Mini program subpackages */
  subPackages?: SubPackageConfig[];
}

/**
 * React Native configuration
 */
interface RNConfig {
  /** Bundle output path */
  output?: {
    ios?: string;
    android?: string;
  };
  /** Enable Hermes engine */
  enableHermes?: boolean;
  /** Metro bundler options */
  metro?: MetroConfig;
}

Development Server Configuration

Development server options for local development and hot reloading.

/**
 * Development server configuration
 */
interface DevServerConfig {
  /** Server port */
  port?: number;
  /** Server host */
  host?: string;
  /** Enable HTTPS */
  https?: boolean;
  /** Open browser automatically */
  open?: boolean;
  /** Proxy configuration */
  proxy?: Record<string, ProxyConfig>;
  /** Enable hot module replacement */
  hot?: boolean;
  /** Enable live reload */
  liveReload?: boolean;
  /** Static file serving options */
  static?: {
    directory?: string;
    publicPath?: string;
  };
}

/**
 * Proxy configuration for development server
 */
interface ProxyConfig {
  target: string;
  changeOrigin?: boolean;
  pathRewrite?: Record<string, string>;
  secure?: boolean;
}

Build Optimization Configuration

Configuration options for build optimization including minification and code splitting.

/**
 * Terser minification configuration
 */
interface TerserConfig {
  enable?: boolean;
  config?: {
    compress?: boolean;
    mangle?: boolean;
    output?: {
      comments?: boolean;
    };
  };
}

/**
 * CSS optimization configuration
 */
interface CssoConfig {
  enable?: boolean;
  config?: {
    restructure?: boolean;
    comments?: boolean;
  };
}

/**
 * File copy configuration
 */
interface CopyConfig {
  patterns?: Array<{
    from: string;
    to: string;
    ignore?: string[];
  }>;
  options?: {
    ignore?: string[];
  };
}

Compiler-Specific Configurations

Configuration options specific to different compilation systems.

/**
 * Webpack 5 specific configuration
 */
interface WebpackConfig {
  /** Custom webpack configuration */
  configureWebpack?: (config: any) => any;
  /** Webpack chain modifications */
  chainWebpack?: (chain: any) => void;
  /** Enable webpack bundle analyzer */
  bundleAnalyzer?: {
    enable?: boolean;
    port?: number;
  };
}

/**
 * Vite specific configuration
 */
interface ViteConfig {
  /** Vite configuration options */
  viteConfig?: {
    server?: {
      port?: number;
      host?: string;
    };
    build?: {
      outDir?: string;
      sourcemap?: boolean;
    };
  };
}

/**
 * ESBuild specific configuration
 */
interface EsbuildConfig {
  /** ESBuild configuration options */
  esbuildConfig?: {
    target?: string;
    minify?: boolean;
    sourcemap?: boolean;
  };
}

Environment Configuration

Environment variable handling and build-time constant definition.

/**
 * Environment configuration interface
 */
interface EnvironmentConfig {
  /** Build-time constants */
  defineConstants?: Record<string, any>;
  /** Environment variables */
  env?: Record<string, any>;
  /** Environment-specific overrides */
  development?: Partial<IProjectConfig>;
  production?: Partial<IProjectConfig>;
  test?: Partial<IProjectConfig>;
}

/**
 * Common environment constants
 */
interface CommonConstants {
  NODE_ENV: 'development' | 'production' | 'test';
  TARO_ENV: string;
  API_BASE_URL?: string;
  APP_VERSION?: string;
  DEBUG?: boolean;
}

Usage Examples:

// Environment-specific configuration
export default defineConfig({
  projectName: 'my-app',
  framework: 'react',
  defineConstants: {
    API_BASE_URL: process.env.NODE_ENV === 'production' 
      ? 'https://api.example.com'
      : 'http://localhost:3001',
  },
  env: {
    NODE_ENV: '"development"',
    CUSTOM_VAR: '"custom-value"',
  },
});

// Platform-specific configuration
export default defineConfig({
  projectName: 'multi-platform-app',
  framework: 'react',
  h5: {
    publicPath: '/h5/',
    router: {
      mode: 'browser',
      basename: '/app',
    },
    devServer: {
      port: 3000,
      proxy: {
        '/api': {
          target: 'http://localhost:8080',
          changeOrigin: true,
        },
      },
    },
  },
  weapp: {
    enableSourceMap: true,
    compile: {
      exclude: ['src/utils/h5-only.ts'],
    },
  },
  rn: {
    output: {
      ios: 'ios/bundle.js',
      android: 'android/bundle.js',
    },
    enableHermes: true,
  },
});

Install with Tessl CLI

npx tessl i tessl/npm-tarojs--cli

docs

cli.md

configuration.md

diagnostics.md

index.md

page-creation.md

plugin-development.md

project-creation.md

utilities.md

tile.json