tessl/npm-vant--cli

A comprehensive TypeScript CLI tool for building Vue component libraries with development server, build pipeline, and documentation generation.

—

Pending

Overview

Eval results

Files

Configuration System

Name: tessl/npm-vant--cli
Author: tessl

Flexible configuration management for build settings, site generation, and development workflows through vant.config.mjs configuration files.

Capabilities

Configuration File

The vant.config.mjs file defines project settings that control the build process, site generation, and development workflows.

/**
 * Main Vant CLI configuration interface for vant.config.mjs
 */
interface VantConfig {
  /** Project name */
  name?: string;
  /** Build-related configuration */
  build?: BuildConfig;
  /** Documentation site configuration */
  site?: SiteConfig;
}

Basic Configuration:

// vant.config.mjs
export default {
  name: 'my-ui-library',
  build: {
    srcDir: 'src',
    tagPrefix: 'my'
  }
};

Build Configuration

Configuration options for the build pipeline and output generation.

/**
 * Build configuration options
 */
interface BuildConfig {
  /** Source directory path (default: 'src') */
  srcDir?: string;
  /** Component tag prefix for generated types */
  tagPrefix?: string;
  /** Enable named exports instead of default exports */
  namedExport?: boolean;
  /** Dependencies to skip during installation */
  skipInstall?: string[];
  /** Package manager to use (npm, yarn, pnpm) */
  packageManager?: 'npm' | 'yarn' | 'pnpm';
  /** File extension configuration */
  extensions?: {
    /** ESM file extension */
    esm?: string;
  };
  /** Bundle generation options */
  bundleOptions?: BundleOption[];
  /** Site build configuration */
  site?: {
    /** Public path for site assets */
    publicPath?: string;
  };
  /** Vetur IDE support configuration */
  vetur?: {
    /** Tag prefix for Vetur */
    tagPrefix?: string;
  };
  /** CSS processing configuration */
  css?: CSSConfig;
  /** Custom Vite configuration function */
  configureVite?: (config: InlineConfig) => InlineConfig | void;
}

/**
 * CSS processing configuration
 */
interface CSSConfig {
  /** CSS preprocessor to use */
  preprocessor?: 'css' | 'less' | 'sass';
  /** Base CSS file path */
  base?: string;
  /** Remove source files after compilation */
  removeSourceFile?: boolean;
}

/**
 * Bundle configuration for different output formats
 */
interface BundleOption {
  /** Enable minification */
  minify?: boolean;
  /** Output formats to generate */
  formats: LibraryFormats[];
  /** External dependencies to exclude */
  external?: string[];
}

Usage:

// vant.config.mjs
export default {
  name: 'my-ui-library',
  build: {
    srcDir: 'components',
    tagPrefix: 'my',
    namedExport: true,
    packageManager: 'pnpm',
    css: {
      preprocessor: 'less',
      base: 'style/base.less'
    },
    bundleOptions: [
      {
        minify: true,
        formats: ['es', 'cjs'],
        external: ['vue']
      }
    ]
  }
};

Site Configuration

Configuration for documentation site generation and appearance.

/**
 * Documentation site configuration
 */
interface SiteConfig {
  /** Default language for the site */
  defaultLang?: string;
  /** CSS class for dark mode */
  darkModeClass?: string;
  /** CSS class for light mode */
  lightModeClass?: string;
  /** Enable vConsole for mobile debugging */
  enableVConsole?: boolean;
  /** Version links for documentation */
  versions?: Array<{ label: string; link: string }>;
  /** Baidu Analytics configuration */
  baiduAnalytics?: {
    seed: string;
  };
  /** ICP license information */
  icpLicense?: {
    text: string;
    link: string;
  };
  /** Custom HTML to inject in head */
  headHtml?: string;
  /** Locale-specific configuration */
  locales?: Record<string, LocaleConfig>;
}

/**
 * Locale-specific configuration for internationalization
 */
interface LocaleConfig {
  /** Language name */
  title?: string;
  /** Language description */
  description?: string;
  /** Language code */
  lang?: string;
  /** Navigation links */
  nav?: Array<{
    title: string;
    items?: Array<{
      path: string;
      title: string;
    }>;
  }>;
}

Usage:

// vant.config.mjs
export default {
  site: {
    defaultLang: 'en-US',
    darkModeClass: 'theme-dark',
    lightModeClass: 'theme-light',
    enableVConsole: true,
    versions: [
      { label: 'v2.x', link: '/v2/' },
      { label: 'v3.x', link: '/v3/' }
    ],
    locales: {
      'en-US': {
        title: 'My UI Library',
        description: 'A Vue.js component library',
        lang: 'en-US'
      },
      'zh-CN': {
        title: '我的UI库',
        description: 'Vue.js 组件库',
        lang: 'zh-CN'
      }
    }
  }
};

Path Constants

Predefined paths used throughout the build system.

/** Current working directory */
const CWD: string;

/** Project root directory (contains vant.config.mjs) */
const ROOT: string;

/** ES modules output directory */
const ES_DIR: string;

/** CommonJS output directory */
const LIB_DIR: string;

/** Documentation directory */
const DOCS_DIR: string;

/** Site build output directory */
const SITE_DIST_DIR: string;

/** Path to vant.config.mjs file */
const VANT_CONFIG_FILE: string;

/** Path to package.json file */
const PACKAGE_JSON_FILE: string;

/** Source directory (configurable via build.srcDir) */
const SRC_DIR: string;

/** Style directory within source */
const STYLE_DIR: string;

/** Supported script file extensions */
const SCRIPT_EXTS: string[];

/** Supported style file extensions */
const STYLE_EXTS: string[];

Usage:

import { SRC_DIR, ES_DIR, LIB_DIR, DOCS_DIR } from "@vant/cli";

console.log('Source directory:', SRC_DIR);
console.log('ES output:', ES_DIR);
console.log('CommonJS output:', LIB_DIR);
console.log('Documentation:', DOCS_DIR);

Vite Integration

Integration utilities for custom Vite configuration.

/**
 * Merges custom Vite configuration with base configuration
 * Loads user's vite.config.js and merges with build-specific config
 * @param config - Base Vite configuration
 * @param mode - Build mode ('production' | 'development')
 * @returns Merged Vite configuration
 */
function mergeCustomViteConfig(
  config: InlineConfig,
  mode: 'production' | 'development'
): Promise<InlineConfig>;

Usage:

import { mergeCustomViteConfig } from "@vant/cli";
import { type InlineConfig } from 'vite';

// In build pipeline
const baseConfig: InlineConfig = {
  build: {
    lib: {
      entry: './src/index.ts'
    }
  }
};

const finalConfig = await mergeCustomViteConfig(baseConfig, 'production');

Configuration File Examples

Basic Configuration

// vant.config.mjs
export default {
  name: 'my-components',
  build: {
    srcDir: 'src',
    tagPrefix: 'my',
    css: {
      preprocessor: 'less'
    }
  }
};

Advanced Configuration

// vant.config.mjs
import { defineConfig } from '@vant/cli';

export default defineConfig({
  name: 'enterprise-ui',
  build: {
    srcDir: 'packages/components',
    tagPrefix: 'ent',
    namedExport: true,
    packageManager: 'pnpm',
    skipInstall: ['@types/node'],
    css: {
      preprocessor: 'scss',
      base: 'styles/foundation.scss',
      removeSourceFile: false
    },
    bundleOptions: [
      {
        minify: false,
        formats: ['es'],
        external: ['vue', '@vue/shared']
      },
      {
        minify: true,
        formats: ['umd'],
        external: []
      }
    ],
    configureVite: (config) => {
      config.define = {
        __VERSION__: JSON.stringify(process.env.npm_package_version)
      };
      return config;
    }
  },
  site: {
    defaultLang: 'en-US',
    darkModeClass: 'dark-theme',
    enableVConsole: process.env.NODE_ENV === 'development',
    versions: [
      { label: 'v1.x', link: 'https://v1.example.com' },
      { label: 'v2.x', link: 'https://v2.example.com' }
    ],
    locales: {
      'en-US': {
        title: 'Enterprise UI',
        description: 'Vue 3 Enterprise Component Library'
      },
      'zh-CN': {
        title: 'Enterprise UI',
        description: 'Vue 3 企业级组件库'
      }
    }
  }
});

Custom Vite Configuration

// vant.config.mjs
export default {
  name: 'custom-build',
  build: {
    configureVite: (config) => {
      // Add custom plugins
      config.plugins = config.plugins || [];
      config.plugins.push(
        // Custom plugin here
      );

      // Modify build options
      config.build = {
        ...config.build,
        rollupOptions: {
          external: ['lodash'],
          output: {
            globals: {
              lodash: '_'
            }
          }
        }
      };

      return config;
    }
  }
};

Environment Variables

Configuration system respects the following environment variables:

// Set by CLI commands
process.env.NODE_ENV          // 'development' | 'production' | 'test'
process.env.BABEL_MODULE      // 'esmodule' | 'commonjs'
process.env.BUILD_TARGET      // 'site' | 'package'
process.env.VANT_CLI_VERSION  // Current CLI version