or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

advanced

environments.mdmodule-runner.mdplugins.mdssr.md

api

utilities.md

core

build.mdconfiguration.mddev-server.mdpreview.md

features

asset-handling.mdasset-queries.mdbuild-manifest.mdclient-hmr.mdcss-processing.mddep-optimization.mdenv-variables.mdglob-imports.mdhmr.mdhtml-processing.mdjson-imports.mdlibrary-mode.mdmodule-graph.mdmodule-resolution.mdproxy-cors.mdtypescript.mdweb-workers.mdwebassembly.md
index.md
tile.json

tessl/npm-vite

Native-ESM powered web dev build tool with instant server start, lightning-fast HMR, and optimized production builds

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/vite@7.3.x

To install, run

npx @tessl/cli install tessl/npm-vite@7.3.0

index.mddocs/

Vite

Vite is a next-generation frontend build tool that provides an extremely fast development experience through native ES modules and optimized production builds. It offers instant server start with on-demand file serving over native ESM, lightning-fast Hot Module Replacement (HMR) that stays fast regardless of app size, and highly optimized production builds powered by Rollup. Vite is framework-agnostic and provides both a powerful dev server and a build command, along with a rich plugin ecosystem and full TypeScript support.

Package Information

  • Package Name: vite
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install vite or pnpm add vite or yarn add vite
  • Node Version: ^20.19.0 || >=22.12.0

Quick Start

Core Imports

import {
  createServer,
  build,
  preview,
  defineConfig,
  type UserConfig,
  type ViteDevServer
} from 'vite';

For CommonJS:

const { createServer, build, preview, defineConfig } = require('vite');

Basic Usage

import { createServer, build, defineConfig } from 'vite';

// Define configuration
export default defineConfig({
  root: './src',
  base: '/',
  build: {
    outDir: '../dist',
  },
});

// Create dev server programmatically
const server = await createServer({
  server: { port: 3000 }
});
await server.listen();

// Build for production
await build({
  root: './src',
  build: { outDir: '../dist' }
});

CLI Usage

Vite provides a command-line interface with four main commands:

# Start development server (default command)
vite
vite dev
vite serve

# Build for production
vite build

# Preview production build locally
vite preview

# Pre-bundle dependencies (deprecated)
vite optimize --force

Core Capabilities

Development Server

Create and configure a Vite development server with instant module serving, HMR, and middleware support.

function createServer(inlineConfig?: InlineConfig): Promise<ViteDevServer>;

interface ViteDevServer {
  config: ResolvedConfig;
  httpServer: HttpServer | null;
  ws: WebSocketServer;
  environments: Record<string, DevEnvironment>;
  listen(port?: number, isRestart?: boolean): Promise<ViteDevServer>;
  close(): Promise<void>;
  restart(forceOptimize?: boolean): Promise<void>;
}

Development Server Guide

Production Build

Build your project for production with optimized bundling, code splitting, and asset handling.

function build(inlineConfig?: InlineConfig): Promise<RollupOutput | RollupOutput[] | RollupWatcher>;
function createBuilder(inlineConfig?: InlineConfig): Promise<ViteBuilder>;

interface ViteBuilder {
  build(environment?: string): Promise<void>;
  buildApp(): Promise<void>;
  close(): Promise<void>;
}

Production Build Guide

Preview Server

Locally preview your production build to test the final output before deployment.

function preview(inlineConfig?: InlineConfig): Promise<PreviewServer>;

interface PreviewServer {
  config: ResolvedConfig;
  httpServer: HttpServer;
  listen(port?: number): Promise<PreviewServer>;
  close(): Promise<void>;
}

Preview Server Guide

Configuration

Define, load, and resolve Vite configuration with type safety and environment-specific settings.

function defineConfig(config: UserConfigExport): UserConfigExport;
function loadConfigFromFile(
  configEnv: ConfigEnv,
  configFile?: string,
  configRoot?: string,
  logLevel?: LogLevel,
  customLogger?: Logger,
  configLoader?: 'bundle' | 'runner' | 'native'
): Promise<{ path: string; config: UserConfig; dependencies: string[] } | null>;
function resolveConfig(
  inlineConfig: InlineConfig,
  command: 'build' | 'serve',
  defaultMode?: string
): Promise<ResolvedConfig>;

Configuration Guide

Advanced Features

Plugin System

Create and configure plugins to extend Vite's functionality with custom transforms, hooks, and behavior.

interface Plugin extends RollupPlugin {
  name: string;
  enforce?: 'pre' | 'post';
  apply?: 'serve' | 'build' | ((config: UserConfig, env: ConfigEnv) => boolean);
  config?: (config: UserConfig, env: ConfigEnv) => UserConfig | null | void;
  configResolved?: (config: ResolvedConfig) => void | Promise<void>;
  configureServer?: (server: ViteDevServer) => (() => void) | void | Promise<(() => void) | void>;
  // ... many more hooks
}

function perEnvironmentPlugin(
  factory: (environment: Environment) => Plugin
): Plugin;

Plugin System Guide

Multi-Environment System

Multi-environment support for client, SSR, and custom build targets with isolated module graphs and plugin pipelines.

class DevEnvironment {
  name: string;
  config: ResolvedConfig;
  moduleGraph: EnvironmentModuleGraph;
  transformRequest(url: string, options?: TransformOptions): Promise<TransformResult | null>;
  warmupRequest(url: string): Promise<void>;
}

function createRunnableDevEnvironment(
  name: string,
  config: ResolvedConfig,
  context?: RunnableDevEnvironmentContext
): RunnableDevEnvironment;

function createFetchableDevEnvironment(
  name: string,
  config: ResolvedConfig,
  context?: FetchableDevEnvironmentContext
): FetchableDevEnvironment;

Environments Guide

Module Runner

Execute transformed modules in any JavaScript environment (Node.js, workers, tests) with HMR support.

class ModuleRunner {
  constructor(options: ModuleRunnerOptions);
  import(url: string): Promise<any>;
  close(): Promise<void>;
}

function createServerModuleRunner(
  environment: DevEnvironment,
  options?: Partial<ServerModuleRunnerOptions>
): Promise<ModuleRunner>;

Module Runner Guide

Server-Side Rendering

Transform and execute modules for server-side rendering with proper externalization and module runner support.

interface SSROptions {
  external?: string[];
  noExternal?: string | RegExp | (string | RegExp)[] | true;
  target?: 'node' | 'webworker';
  resolve?: {
    conditions?: string[];
    externalConditions?: string[];
  };
}

function fetchModule(
  environment: DevEnvironment,
  url: string,
  importer?: string,
  options?: FetchModuleOptions
): Promise<FetchResult>;

function createServerModuleRunner(
  environment: DevEnvironment,
  options?: Partial<ServerModuleRunnerOptions>
): Promise<ModuleRunner>;

SSR Guide

Feature Guides

Hot Module Replacement

Server-side and client-side HMR systems for lightning-fast updates during development.

Module Graph

Track module dependencies, importers, and transforms for efficient HMR and incremental builds.

class EnvironmentModuleGraph {
  getModuleByUrl(url: string): Promise<EnvironmentModuleNode | undefined>;
  getModuleById(id: string): EnvironmentModuleNode | undefined;
  invalidateModule(mod: EnvironmentModuleNode): void;
  invalidateAll(): void;
}

interface EnvironmentModuleNode {
  id: string | null;
  url: string;
  importers: Set<EnvironmentModuleNode>;
  importedModules: Set<EnvironmentModuleNode>;
  transformResult: TransformResult | null;
}

Module Graph Guide

Asset Handling

Import and process static assets (images, fonts, media) with URL generation and inlining support.

interface BuildOptions {
  assetsDir?: string;
  assetsInlineLimit?: number;
  assetsInclude?: string | RegExp | (string | RegExp)[];
}

CSS Processing

Process CSS, CSS Modules, preprocessors (Sass, Less, Stylus), and PostCSS with full HMR support.

function preprocessCSS(
  code: string,
  filename: string,
  config: ResolvedConfig
): Promise<PreprocessCSSResult>;

interface CSSOptions {
  modules?: CSSModulesOptions;
  postcss?: string | object;
  preprocessorOptions?: Record<string, any>;
  lightningcss?: LightningCSSOptions;
}

CSS Processing Guide

TypeScript Support

Transform TypeScript with esbuild for fast compilation without type checking.

function transformWithEsbuild(
  code: string,
  filename: string,
  options?: ESBuildTransformOptions,
  inMap?: object
): Promise<ESBuildTransformResult>;

interface ESBuildOptions {
  include?: string | RegExp | string[] | RegExp[];
  exclude?: string | RegExp | string[] | RegExp[];
  jsxInject?: string;
  target?: string | string[];
}

TypeScript Guide

Import Features

  • JSON Imports - Import JSON with named imports and tree-shaking
  • Glob Imports - Dynamically import multiple modules with import.meta.glob
  • Environment Variables - Load and access .env files with type-safe access
  • Web Workers - Import and instantiate Web Workers and Shared Workers
  • WebAssembly - Import and instantiate WebAssembly modules

Build Features

  • Build Manifest - Generate manifest mapping original files to built assets
  • Library Mode - Build libraries with multiple output formats (ESM, CommonJS, UMD, IIFE)
  • HTML Processing - Transform HTML entry points with script injection and tag manipulation
  • Module Resolution - Resolve module IDs with custom resolution logic, aliases, and conditions
  • Proxy and CORS - Configure HTTP proxy and CORS for the development server
  • Dependency Optimization - Pre-bundle dependencies with esbuild for faster cold starts

API Reference

Utilities

Common utility functions for path normalization, config merging, filtering, logging, plugin management, and more.

function normalizePath(id: string): string;
function mergeConfig<T, U>(defaults: T, overrides: U): Record<string, any>;
function mergeAlias(a?: AliasOptions, b?: AliasOptions): AliasOptions | undefined;
function createFilter(
  include?: FilterPattern,
  exclude?: FilterPattern,
  options?: { resolve?: string | false }
): (id: string | unknown) => boolean;
function createLogger(level?: LogLevel, options?: LogOptions): Logger;
function isCSSRequest(request: string): boolean;
function loadEnv(mode: string, envDir: string, prefixes?: string | string[]): Record<string, string>;
function searchForWorkspaceRoot(current: string, root?: string): string;
function isFileServingAllowed(file: string, server: ViteDevServer): boolean;
function isFileLoadingAllowed(file: string, server: ViteDevServer): boolean;
function send(req: IncomingMessage, res: ServerResponse, content: string | Buffer, type: string, options: SendOptions): void;
function buildErrorMessage(err: Error, args?: string[], includeStack?: boolean): string;
function parseAst(code: string, options?: any): Promise<any>;
function parseAstAsync(code: string, options?: any): Promise<any>;
function sortUserPlugins(plugins: (Plugin | Plugin[])[]): [Plugin[], Plugin[], Plugin[]];
function perEnvironmentPlugin(factory: (environment: Environment) => Plugin): Plugin;
function perEnvironmentState<T>(stateFactory: () => T): PerEnvironmentState<T>;
function runnerImport<T>(moduleId: string, inlineConfig?: InlineConfig): Promise<RunnerImportResult<T>>;
function isRunnableDevEnvironment(environment: DevEnvironment): environment is RunnableDevEnvironment;
function isFetchableDevEnvironment(environment: DevEnvironment): environment is FetchableDevEnvironment;
function moduleRunnerTransform(code: string, inMap: SourceMap | null, url: string, originalCode: string, options?: ModuleRunnerTransformOptions): Promise<TransformResult | null>;

Utilities Reference

Architecture

Vite is built around several key components:

  • Dev Server: Connect-based middleware server that serves source files over native ES modules with instant transforms
  • Build System: Rollup-based production bundler with optimized static asset generation
  • Plugin System: Rollup-compatible plugin interface extended with Vite-specific hooks
  • Module Graph: Per-environment dependency tracking for HMR and transforms
  • HMR Engine: WebSocket-based Hot Module Replacement with custom event support
  • Dependency Optimizer: esbuild-powered pre-bundling of dependencies for optimal loading
  • Environment System: Multi-environment support (client, SSR, custom) with isolated module graphs
  • Module Runner: Standalone runtime for executing transformed modules outside the browser

Types

Common types used throughout the Vite API are documented in each relevant section. Key base types include:

  • UserConfig - User configuration object
  • ResolvedConfig - Fully resolved configuration
  • Plugin - Plugin interface
  • ViteDevServer - Dev server instance
  • InlineConfig - Inline configuration for programmatic use
  • FilterPattern - File filter patterns (string | RegExp | (string | RegExp)[])

See individual capability documentation for detailed type definitions.