Vit Cheatsheet

- Next Generation Frontend Tooling

Vite ist ein Build-Tool, das eine schnellere und schlankere Entwicklungserfahrung für moderne Web-Projekte bieten soll. Es besteht aus einem dev-Server, der über native ES-Module reiche Featureerweiterungen bietet, und einem Build-Befehl, der Ihren Code mit Rollup bündelt. < p>

generieren

Inhaltsverzeichnis

[Installation](LINK_0 -%20(__LINK_0___)
[Development Server](LINK_0__ -%20[Konfiguration](LINK_0 -%20[Build%20Process](_LINK_0__ -%20[Plugin%20System](_LINK_0___ -%20Umweltvariablen
(__LINK_0___)
(__LINK_0___)
[TypeScript Support](LINK_0 -%20(__LINK_0___)
[Bestellung](LINK_0 -%20(_LINK_0)
(__LINK_0___)
Beste Praktiken

Installation

Globale Installation

```bash

Install Vite globally

npm install -g vite

Using Yarn

yarn global add vite

Using pnpm

pnpm add -g vite

Verify installation

vite --version ```_

Projektspezifische Installation

```bash

Install as dev dependency

npm install --save-dev vite

Using Yarn

yarn add --dev vite

Using pnpm

pnpm add -D vite ```_

Voraussetzungen

```bash

Node.js version requirements

node --version # Should be 14.18+ or 16+

Check npm version

npm --version

Update npm if needed

npm install -g npm@latest ```_

Projekterstellung

Neue Projekte erstellen

```bash

Create vanilla JavaScript project

npm create vite@latest my-project

Create with specific template

npm create vite@latest my-react-app -- --template react npm create vite@latest my-vue-app -- --template vue npm create vite@latest my-svelte-app -- --template svelte

Using Yarn

yarn create vite my-project

Using pnpm

pnpm create vite my-project ```_

Verfügbare Vorlagen

```bash

JavaScript frameworks

npm create vite@latest -- --template vanilla npm create vite@latest -- --template vanilla-ts npm create vite@latest -- --template react npm create vite@latest -- --template react-ts npm create vite@latest -- --template vue npm create vite@latest -- --template vue-ts npm create vite@latest -- --template svelte npm create vite@latest -- --template svelte-ts

Additional templates

npm create vite@latest -- --template lit npm create vite@latest -- --template lit-ts npm create vite@latest -- --template preact npm create vite@latest -- --template preact-ts ```_

Projektstruktur

```bash

Typical Vite project structure

my-vite-project/ ├── index.html # Entry HTML file ├── package.json # Dependencies and scripts ├── vite.config.js # Vite configuration ├── src/ │ ├── main.js # Application entry point │ ├── style.css # Global styles │ └── components/ # Component files ├── public/ # Static assets └── dist/ # Build output (generated) ```_

Entwicklungsserver

Entwicklungsserver starten

```bash

Start dev server

npm run dev

Start with specific port

npm run dev -- --port 3000

Start with specific host

npm run dev -- --host 0.0.0.0

Start with HTTPS

npm run dev -- --https

Start with custom config

npm run dev -- --config vite.config.custom.js ```_

Serveroptionen entwickeln

```bash

Open browser automatically

npm run dev -- --open

Clear cache and restart

npm run dev -- --force

Enable debug mode

DEBUG=vite:* npm run dev

Start with specific mode

npm run dev -- --mode development ```_

Hot Module Ersatz (HMR)

```javascript // Enable HMR in your code if (import.meta.hot) { import.meta.hot.accept('./module.js', (newModule) => { // Handle module update });

// Accept self updates import.meta.hot.accept();

// Dispose callback import.meta.hot.dispose((data) => { // Cleanup before update }); } ```_

Konfiguration

Grundkonfiguration

```javascript // vite.config.js import { defineConfig } from 'vite';

export default defineConfig({ // Basic options root: './src', base: '/', mode: 'development',

// Server configuration server: { port: 3000, host: true, open: true, https: false, proxy: { '/api': 'http://localhost:8080' } },

// Build configuration build: { outDir: 'dist', assetsDir: 'assets', sourcemap: true, minify: 'terser' } }); ```_

Erweiterte Konfiguration

```javascript // vite.config.js import { defineConfig } from 'vite'; import { resolve } from 'path';

export default defineConfig({ // Resolve configuration resolve: { alias: { '@': resolve(__dirname, 'src'), '@components': resolve(__dirname, 'src/components'), '@utils': resolve(__dirname, 'src/utils') }, extensions: ['.js', '.ts', '.jsx', '.tsx', '.vue'] },

// CSS configuration css: { preprocessorOptions: { scss: { additionalData: @import "@/styles/variables.scss"; } }, modules: { localsConvention: 'camelCase' } },

// Environment variables define: { APP_VERSION: JSON.stringify(process.env.npm_package_version) },

// Optimization optimizeDeps: { include: ['lodash', 'axios'], exclude: ['some-large-dependency'] } }); ```_

Zustandskonfiguration

```javascript // vite.config.js import { defineConfig } from 'vite';

export default defineConfig(({ command, mode }) => { const config = { // Common configuration };

if (command === 'serve') { // Development configuration config.server = { port: 3000 }; } else { // Build configuration config.build = { rollupOptions: { external: ['vue'] } }; }

if (mode === 'production') { // Production-specific configuration config.build.minify = 'terser'; }

return config; }); ```_

Prozess

Gebäude für die Produktion

```bash

Build for production

npm run build

Build with specific mode

npm run build -- --mode production

Build with custom config

npm run build -- --config vite.config.prod.js

Build and analyze bundle

npm run build -- --analyze ```_

Konfiguration erstellen

```javascript // vite.config.js export default defineConfig({ build: { // Output directory outDir: 'dist',

// Assets directory
assetsDir: 'assets',

// Generate sourcemaps
sourcemap: true,

// Minification
minify: 'terser',

// Terser options
terserOptions: {
  compress: {
    drop_console: true,
    drop_debugger: true
  }
},

// Rollup options
rollupOptions: {
  input: {
    main: resolve(__dirname, 'index.html'),
    admin: resolve(__dirname, 'admin.html')
  },
  output: {
    manualChunks: {
      vendor: ['vue', 'vue-router'],
      utils: ['lodash', 'axios']
    }
  }
},

// Asset inlining threshold
assetsInlineLimit: 4096,

// CSS code splitting
cssCodeSplit: true,

// Library mode
lib: {
  entry: resolve(__dirname, 'src/main.js'),
  name: 'MyLib',
  fileName: 'my-lib'
}

} }); ```_

Vorschau Integrierte Anwendung

```bash

Preview production build

npm run preview

Preview with specific port

npm run preview -- --port 4173

Preview with HTTPS

npm run preview -- --https ```_

Plugin System

Offizielle Plugins

```bash

Install official plugins

npm install --save-dev @vitejs/plugin-react npm install --save-dev @vitejs/plugin-vue npm install --save-dev @vitejs/plugin-svelte npm install --save-dev @vitejs/plugin-legacy ```_

Plugin Konfiguration

```javascript // vite.config.js import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import { resolve } from 'path';

export default defineConfig({ plugins: [ react({ // React plugin options include: "*/.{jsx,tsx}", babel: { plugins: ['babel-plugin-styled-components'] } }) ] }); ```_

Beliebte Gemeinschafts-Plugins

```bash

Install popular plugins

npm install --save-dev vite-plugin-eslint npm install --save-dev vite-plugin-windicss npm install --save-dev vite-plugin-pwa npm install --save-dev vite-plugin-mock npm install --save-dev vite-plugin-html ```_

Benutzerdefinierte Plugin Entwicklung

``javascript // Custom plugin example function myPlugin() { return { name: 'my-plugin', configResolved(config) { // Access final config }, buildStart(opts) { // Build start hook }, load(id) { // Load hook if (id === 'virtual:my-module') { return 'export const msg = "Hello from virtual module"'; } }, transform(code, id) { // Transform hook if (id.endsWith('.special')) { returnexport default ${JSON.stringify(code)}`; } } }; }

// Use custom plugin export default defineConfig({ plugins: [myPlugin()] }); ```_

Umweltvariablen

Umweltdateien

```bash

Environment file hierarchy

.env # Loaded in all cases .env.local # Loaded in all cases, ignored by git .env.[mode] # Only loaded in specified mode .env.[mode].local # Only loaded in specified mode, ignored by git ```_

Umweltvariable Beispiele

```bash

.env

VITE_APP_TITLE=My App VITE_API_URL=https://api.example.com

.env.development

VITE_API_URL=http://localhost:3000/api

.env.production

VITE_API_URL=https://api.production.com ```_

Verwendung von Umweltvariablen

```javascript // In your application code console.log(import.meta.env.VITE_APP_TITLE); console.log(import.meta.env.VITE_API_URL);

// Built-in environment variables console.log(import.meta.env.MODE); // 'development' or 'production' console.log(import.meta.env.BASE_URL); // Base URL console.log(import.meta.env.PROD); // Boolean console.log(import.meta.env.DEV); // Boolean console.log(import.meta.env.SSR); // Boolean ```_

TypScript Umgebungsvariablen

```typescript // vite-env.d.ts interface ImportMetaEnv { readonly VITE_APP_TITLE: string; readonly VITE_API_URL: string; }

interface ImportMeta { readonly env: ImportMetaEnv; } ```_

Asset Handling

Statische Vermögenswerte

```javascript // Import static assets import imgUrl from './img.png'; import workerUrl from './worker.js?worker'; import inlineWorker from './worker.js?worker&inline;';

// URL imports import assetAsURL from './asset.js?url'; import assetAsString from './shader.glsl?raw';

// Dynamic imports const modules = import.meta.glob('./dir/.js'); const modules = import.meta.glob('./dir/.js', { eager: true }); ```_

Öffentliches Verzeichnis

```bash

Files in public/ are served at root

public/ ├── favicon.ico # Available at /favicon.ico ├── robots.txt # Available at /robots.txt └── images/ └── logo.png # Available at /images/logo.png ```_

Asset Processing

```javascript // vite.config.js export default defineConfig({ assetsInclude: ['*/.gltf'],

build: { assetsInlineLimit: 4096, rollupOptions: { output: { assetFileNames: (assetInfo) => { let extType = assetInfo.name.split('.').at(1); | if (/png | jpe?g | svg | gif | tiff | bmp | ico/i.test(extType)) { | extType = 'img'; } return assets/${extType}/[name]-[hash][extname]; } } } } }); ```_

CSS Verarbeitung

CSS Module

```css / styles.module.css / .button { background: blue; color: white; }

.button:hover { background: darkblue; } ```_

```javascript // Using CSS modules import styles from './styles.module.css';

function Button() { return ; } ```_

CSS Vorverarbeiter

```bash

Install preprocessors

npm install --save-dev sass npm install --save-dev less npm install --save-dev stylus ```_

javascript // vite.config.js export default defineConfig({ css: { preprocessorOptions: { scss: { additionalData: `@import "@/styles/variables.scss";` }, less: { math: 'parens-division' }, styl: { define: { $specialColor: new stylus.nodes.RGBA(51, 197, 255, 1) } } } } });_

PostCSS Integration

```bash

Install PostCSS plugins

npm install --save-dev autoprefixer npm install --save-dev tailwindcss npm install --save-dev postcss-nested ```_

javascript // postcss.config.js module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, 'postcss-nested': {} } };_

CSS-in-JS Unterstützung

```bash

Install CSS-in-JS libraries

npm install styled-components npm install @emotion/react @emotion/styled npm install @stitches/react ```_

TypScript Support

TypScript Konfiguration

json // tsconfig.json { "compilerOptions": { "target": "ES2020", "useDefineForClassFields": true, "lib": ["ES2020", "DOM", "DOM.Iterable"], "module": "ESNext", "skipLibCheck": true, "moduleResolution": "bundler", "allowImportingTsExtensions": true, "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx", "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true, "baseUrl": ".", "paths": { "@/*": ["src/*"] } }, "include": ["src"], "references": [{ "path": "./tsconfig.node.json" }] }_

TypScript in Vite Config

```typescript // vite.config.ts import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import { resolve } from 'path';

export default defineConfig({ plugins: [react()], resolve: { alias: { '@': resolve(__dirname, './src') } }, server: { port: 3000 } }); ```_

Typ Überprüfung

```bash

Run TypeScript compiler for type checking

npx tsc --noEmit

Add to package.json scripts

{ "scripts": { "type-check": "tsc --noEmit", "build": "tsc --noEmit && vite build" } } ```_

Integration testen

Vitest Setup

```bash

Install Vitest

npm install --save-dev vitest

Install testing utilities

npm install --save-dev @testing-library/react npm install --save-dev @testing-library/jest-dom npm install --save-dev jsdom ```_

```javascript // vite.config.js import { defineConfig } from 'vite';

export default defineConfig({ test: { globals: true, environment: 'jsdom', setupFiles: './src/test/setup.ts' } }); ```_

Testkonfiguration

```javascript // src/test/setup.ts import '@testing-library/jest-dom';

// Mock environment variables Object.defineProperty(import.meta, 'env', { value: { VITE_API_URL: 'http://localhost:3000' } }); ```_

Beispielversuche

```javascript // src/components/Button.test.tsx import { render, screen } from '@testing-library/react'; import { Button } from './Button';

test('renders button with text', () => { render(); expect(screen.getByRole('button')).toHaveTextContent('Click me'); }); ```_

Paket.json Scripts

json { "scripts": { "test": "vitest", "test:ui": "vitest --ui", "test:run": "vitest run", "coverage": "vitest run --coverage" } }_

Bereitstellung

Static Hosting

```bash

Build for production

npm run build

Deploy to various platforms

Netlify

npm install -g netlify-cli netlify deploy --prod --dir dist

Vercel

npm install -g vercel vercel --prod

GitHub Pages

npm install --save-dev gh-pages ```_

Einsatz von Docker

```dockerfile

Dockerfile

FROM node:18-alpine as build

WORKDIR /app COPY package*.json ./ RUN npm ci

COPY . . RUN npm run build

FROM nginx:alpine COPY --from=build /app/dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] ```_

CI/CD Pipeline

```yaml

.github/workflows/deploy.yml

name: Deploy

on: push: branches: [main]

jobs: deploy: runs-on: ubuntu-latest

steps:
  - uses: actions/checkout@v3

  - name: Setup Node.js
    uses: actions/setup-node@v3
    with:
      node-version: '18'
      cache: 'npm'

  - name: Install dependencies
    run: npm ci

  - name: Run tests
    run: npm run test:run

  - name: Build
    run: npm run build

  - name: Deploy to Netlify
    uses: nwtgck/actions-netlify@v2.0
    with:
      publish-dir: './dist'
      production-branch: main
    env:
      NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
      NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

```_

Leistungsoptimierung

Bundanalyse

```bash

Install bundle analyzer

npm install --save-dev rollup-plugin-visualizer

Add to vite.config.js

import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({ plugins: [ visualizer({ filename: 'dist/stats.html', open: true }) ] }); ```_

Code Splitting

```javascript // Dynamic imports for code splitting const LazyComponent = lazy(() => import('./LazyComponent'));

// Route-based splitting const routes = [ { path: '/home', component: lazy(() => import('./pages/Home')) }, { path: '/about', component: lazy(() => import('./pages/About')) } ]; ```_

Optimierung Konfiguration

```javascript // vite.config.js export default defineConfig({ build: { rollupOptions: { output: { manualChunks: { vendor: ['react', 'react-dom'], router: ['react-router-dom'], ui: ['@mui/material', '@mui/icons-material'] } } } },

optimizeDeps: { include: ['react', 'react-dom'], exclude: ['@vite/client', '@vite/env'] } }); ```_

Leistungsüberwachung

```javascript // Performance monitoring script function measurePerformance() { // Measure bundle size const bundleSize = performance.getEntriesByType('navigation')[0].transferSize;

// Measure load time const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;

// Send metrics to analytics analytics.track('performance', { bundleSize, loadTime, userAgent: navigator.userAgent }); }

window.addEventListener('load', measurePerformance); ```_

Fehlerbehebung

Gemeinsame Themen

Hafen bereits im Einsatz

```bash

Find process using port

lsof -ti:3000

Kill process

kill -9 $(lsof -ti:3000)

Use different port

npm run dev -- --port 3001 ```_

Probleme der Modulauflösung

javascript // vite.config.js export default defineConfig({ resolve: { alias: { '@': path.resolve(__dirname, './src') }, extensions: ['.js', '.ts', '.jsx', '.tsx', '.vue'] } });_

Fehler erstellen

```bash

Clear cache

rm -rf node_modules/.vite

Reinstall dependencies

rm -rf node_modules package-lock.json npm install

Force rebuild

npm run build -- --force ```_

Speicherprobleme

```bash

Increase Node.js memory limit

export NODE_OPTIONS="--max-old-space-size=4096"

Or in package.json

{ "scripts": { "build": "NODE_OPTIONS='--max-old-space-size=4096' vite build" } } ```_

Debug Mode

```bash

Enable debug logging

DEBUG=vite:* npm run dev

Specific debug categories

DEBUG=vite:deps npm run dev DEBUG=vite:hmr npm run dev DEBUG=vite:config npm run dev ```_

Performance Debugging

```javascript // vite.config.js export default defineConfig({ server: { hmr: { overlay: false } },

build: { sourcemap: true, rollupOptions: { onwarn(warning, warn) { // Suppress specific warnings if (warning.code === 'MODULE_LEVEL_DIRECTIVE') return; warn(warning); } } } }); ```_

Best Practices

Projektstruktur

```bash

Recommended project structure

src/ ├── components/ # Reusable components │ ├── ui/ # Basic UI components │ └── features/ # Feature-specific components ├── pages/ # Page components ├── hooks/ # Custom hooks ├── utils/ # Utility functions ├── services/ # API services ├── stores/ # State management ├── styles/ # Global styles ├── assets/ # Static assets └── types/ # TypeScript types ```_

Konfigurationsmanagement

```javascript // Use environment-specific configs // vite.config.base.js export const baseConfig = { plugins: [react()], resolve: { alias: { '@': resolve(__dirname, './src') } } };

// vite.config.dev.js import { baseConfig } from './vite.config.base.js';

export default defineConfig({ ...baseConfig, server: { port: 3000, open: true } }); ```_

Performance Best Practices

```javascript // Lazy load components const LazyComponent = lazy(() => import('./Component').then(module => ({ default: module.Component })) );

// Preload critical resources const criticalResource = import('./critical-module');

// Use dynamic imports for large libraries async function loadChart() { const { Chart } = await import('chart.js'); return Chart; } ```_

Sicherheit Best Practices

```javascript // vite.config.js export default defineConfig({ server: { headers: { 'X-Frame-Options': 'DENY', 'X-Content-Type-Options': 'nosniff', 'Referrer-Policy': 'strict-origin-when-cross-origin' } },

build: { rollupOptions: { external: (id) => { // Externalize sensitive modules | return id.includes('secret') | | id.includes('private'); | } } } }); ```_

Entwicklungs-Workflow

json { "scripts": { "dev": "vite", "build": "tsc && vite build", "preview": "vite preview", "test": "vitest", "test:ui": "vitest --ui", "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "lint:fix": "eslint src --ext ts,tsx --fix", "type-check": "tsc --noEmit", "analyze": "vite build --analyze" } }_

--

Zusammenfassung

Vite ist ein leistungsstarkes, schnelles und modernes Build-Tool, das die Entwicklungserfahrung für Frontend-Projekte deutlich verbessert. Zu den wichtigsten Vorteilen gehören:

Lightning Fast: Instant Serverstart und Blitzschnelle HMR
*Rich Features: TypeScript, JSX, CSS Preprozessoren unterstützen aus der Box
** Optimierter Bau**: Verwendungen Rollup für Produktion baut mit erweiterten Optimierungen
Plugin Ecosystem: Umfangreiches Plugin-System für die Anpassung
*Framework Agnostic: Arbeitet mit React, Vue, Svelte und Vanille JavaScript

Für optimale Leistung, nutzen Sie die nativen ES-Module von Vite in der Entwicklung, konfigurieren Sie die richtige Codespaltung für die Produktion und nutzen Sie das reiche Plugin-Ökosystem für verbesserte Funktionalität.

<= <= <= <================================================================================= Funktion copyToClipboard() {\cHFFFF} const commands = document.querySelectorAll('code'); alle Befehle = ''; Befehle. Für jede(cmd) => alle Befehle += cmd.textContent + '\n'); navigator.clipboard.writeText (allCommands); Alarm ('Alle Befehle, die in die Zwischenablage kopiert werden!'); }

Funktion generierenPDF() { Fenster.print(); }