A comprehensive TypeScript CLI tool for building Vue component libraries with development server, build pipeline, and documentation generation.
—
Essential utilities for file operations, path manipulation, string transformations, and component analysis. These are internal APIs used throughout the build system. While technically accessible, they are not part of the public API and may change between versions.
⚠️ Important Note: The functions documented below are internal implementation details and are NOT exported from the main @vant/cli package. They cannot be imported and used programmatically. The usage examples are provided for documentation purposes only to understand the build system's internal workings.
Utilities for detecting different types of files in Vue component libraries.
/**
* Checks if path is a directory
* @param dir - Path to check
* @returns True if path is a directory
*/
function isDir(dir: string): boolean;
/**
* Checks if path is a demo directory
* @param dir - Path to check
* @returns True if path matches demo directory pattern
*/
function isDemoDir(dir: string): boolean;
/**
* Checks if path is a test directory
* @param dir - Path to check
* @returns True if path matches test directory pattern
*/
function isTestDir(dir: string): boolean;
/**
* Checks if file is an asset (image, font, etc.)
* @param path - File path to check
* @returns True if file matches asset pattern
*/
function isAsset(path: string): boolean;
/**
* Checks if file is a Vue Single File Component
* @param path - File path to check
* @returns True if file has .vue extension
*/
function isSfc(path: string): boolean;
/**
* Checks if file is a style file (CSS, Less, Sass)
* @param path - File path to check
* @returns True if file matches style pattern
*/
function isStyle(path: string): boolean;
/**
* Checks if file is a script file (JS, TS, JSX, TSX)
* @param path - File path to check
* @returns True if file matches script pattern
*/
function isScript(path: string): boolean;
/**
* Checks if file is JSX/TSX
* @param path - File path to check
* @returns True if file matches JSX pattern
*/
function isJsx(path: string): boolean;Usage (Internal API - Not Recommended):
// Note: These functions are not publicly exported and may change
import { isSfc, isStyle, isScript, isAsset } from "@vant/cli";
const files = [
"Button.vue",
"button.less",
"index.ts",
"logo.png"
];
files.forEach(file => {
if (isSfc(file)) console.log(`${file} is a Vue component`);
if (isStyle(file)) console.log(`${file} is a style file`);
if (isScript(file)) console.log(`${file} is a script file`);
if (isAsset(file)) console.log(`${file} is an asset`);
});Utilities for working with file paths and extensions.
/**
* Removes file extension from path
* @param path - File path with extension
* @returns Path without extension
*/
function removeExt(path: string): string;
/**
* Replaces file extension
* @param path - Original file path
* @param ext - New extension (with or without dot)
* @returns Path with new extension
*/
function replaceExt(path: string, ext: string): string;
/**
* Normalizes path separators for cross-platform compatibility
* @param path - Path to normalize
* @returns Path with forward slashes
*/
function normalizePath(path: string): string;Usage:
import { removeExt, replaceExt, normalizePath } from "@vant/cli";
console.log(removeExt("button.vue")); // "button"
console.log(replaceExt("button.ts", ".js")); // "button.js"
console.log(normalizePath("src\\components\\Button.vue")); // "src/components/Button.vue"Case conversion utilities commonly used in Vue component development.
/**
* Converts kebab-case to camelCase
* @param str - String in kebab-case
* @returns String in camelCase
*/
function camelize(str: string): string;
/**
* Converts string to PascalCase
* @param str - String to convert
* @returns String in PascalCase
*/
function pascalize(str: string): string;
/**
* Converts camelCase to kebab-case
* @param str - String in camelCase
* @param sep - Separator character (default: '-')
* @returns String in kebab-case
*/
function decamelize(str: string, sep?: string): string;Usage:
import { camelize, pascalize, decamelize } from "@vant/cli";
console.log(camelize("user-profile")); // "userProfile"
console.log(pascalize("user-profile")); // "UserProfile"
console.log(decamelize("UserProfile")); // "user-profile"
console.log(decamelize("UserProfile", "_")); // "user_profile"Utilities for analyzing Vue component structure and exports.
/**
* Gets all component directory names from src directory
* Filters for directories with valid entry files containing exports
* @returns Array of component directory names
*/
function getComponents(): string[];
/**
* Checks if code contains export statements or defineOptions
* @param code - Source code to analyze
* @returns True if code has valid exports
*/
function hasExportOrDefineOptions(code: string): boolean;Usage:
import { getComponents, hasExportOrDefineOptions } from "@vant/cli";
// Get all component directories
const components = getComponents();
console.log(components); // ["button", "input", "dialog"]
// Check if file has valid exports
const code = `
export default {
name: 'Button'
};
`;
console.log(hasExportOrDefineOptions(code)); // trueUtilities for managing build environment and detecting development mode.
/**
* Sets module environment for Babel transpilation
* @param value - Module environment type
*/
function setModuleEnv(value: ModuleEnv): void;
/**
* Sets Node.js environment
* @param value - Node environment type
*/
function setNodeEnv(value: NodeEnv): void;
/**
* Sets build target for conditional logic
* @param value - Build target type
*/
function setBuildTarget(value: BuildTarget): void;
/**
* Checks if currently in development mode
* @returns True if NODE_ENV is 'development'
*/
function isDev(): boolean;
// Environment types
type ModuleEnv = 'esmodule' | 'commonjs';
type NodeEnv = 'production' | 'development' | 'test';
type BuildTarget = 'site' | 'package';Usage:
import { setNodeEnv, setModuleEnv, isDev } from "@vant/cli";
// Set production environment
setNodeEnv('production');
setModuleEnv('esmodule');
// Check development mode
if (isDev()) {
console.log('Development mode active');
}Advanced file operation utilities.
/**
* Writes file only if content has changed (smart output)
* Prevents unnecessary file system writes and timestamp updates
* @param filePath - Path to output file
* @param content - Content to write
*/
function smartOutputFile(filePath: string, content: string): void;Usage:
import { smartOutputFile } from "@vant/cli";
// Only writes if content is different from existing file
smartOutputFile("./dist/bundle.js", generatedCode);Utilities for integrating with Vite configuration.
/**
* Merges custom Vite configuration with base configuration
* @param config - Base Vite configuration
* @param mode - Build mode ('production' | 'development')
* @returns Merged configuration
*/
function mergeCustomViteConfig(
config: InlineConfig,
mode: 'production' | 'development'
): Promise<InlineConfig>;Usage:
import { mergeCustomViteConfig } from "@vant/cli";
import { type InlineConfig } from 'vite';
const baseConfig: InlineConfig = {
// Base configuration
};
const finalConfig = await mergeCustomViteConfig(baseConfig, 'production');Predefined patterns for file type detection:
// File extension patterns
const EXT_REGEXP: RegExp; // /\.\w+$/
const SFC_REGEXP: RegExp; // /\.(vue)$/
const DEMO_REGEXP: RegExp; // /\/demo$/
const TEST_REGEXP: RegExp; // /\/test$/
const ASSET_REGEXP: RegExp; // /\.(png|jpe?g|gif|webp|ico|jfif|svg|woff2?|ttf)$/i
const STYLE_REGEXP: RegExp; // /\.(css|less|scss)$/
const SCRIPT_REGEXP: RegExp; // /\.(js|ts|jsx|tsx)$/
const JSX_REGEXP: RegExp; // /\.(j|t)sx$/
// Supported file extensions
const ENTRY_EXTS: string[]; // ['js', 'ts', 'tsx', 'jsx', 'vue']Usage:
import { STYLE_REGEXP, SCRIPT_REGEXP } from "@vant/cli";
function categorizeFile(filename: string) {
if (STYLE_REGEXP.test(filename)) return 'style';
if (SCRIPT_REGEXP.test(filename)) return 'script';
return 'other';
}Additional utilities for package management:
/**
* Checks if Yarn is available in the system
* @returns True if Yarn is installed and accessible
*/
function hasYarn(): boolean;
/**
* Gets the configured package manager
* @returns Package manager name ('yarn', 'npm', or custom)
*/
function getPackageManager(): 'yarn' | 'npm' | string;
/**
* Installs project dependencies using detected package manager
* @returns Promise that resolves when installation is complete
*/
function installDependencies(): Promise<void>;/**
* Returns a colored, shortened path relative to project root
* @param path - Full file path
* @returns Shortened, colored path for logging
*/
function slimPath(path: string): string;Install with Tessl CLI
npx tessl i tessl/npm-vant--cli