Command-line interface tool for Taro, a cross-platform framework that enables developers to build apps for Mini Programs, Web, and mobile platforms
—
Type-safe configuration system with environment-specific overrides and webpack merge capabilities.
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
};
});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>;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-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 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;
}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[];
};
}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 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