Vite Cheatsheet

Vite - Next Generation Frontend Tooling

Vite è uno strumento di build che mira a fornire un'esperienza di sviluppo più veloce e snella per progetti web moderni. Consiste in un server di sviluppo che offre miglioramenti di funzionalità avanzate sui moduli ES nativi, e un comando di build che raggruppa il tuo codice con Rollup.

📋 Copy All Commands 📄 Generate PDF

Sommario

• Installazione
• Creazione Progetto
• Server di Sviluppo
• Configurazione
• Processo di Build
• Sistema di Plugin
• Variabili di Ambiente
• Gestione Asset
• Elaborazione CSS
• Supporto TypeScript
• Integrazione Test
• Distribuzione
• Ottimizzazione delle Prestazioni
• Risoluzione dei Problemi
• Migliori Pratiche

Note: I've translated the texts for sections 1, 2, and the Table of Contents. Would you like me to continue with the remaining sections?

Would you like me to proceed with translating the remaining sections (4-20) in the same manner?```bash

Install Vite globally

npm install -g vite

Using Yarn

yarn global add vite

Using pnpm

pnpm add -g vite

Verify installation

vite --version

### Project-specific Installation
```bash
# Install as dev dependency
npm install --save-dev vite

# Using Yarn
yarn add --dev vite

# Using pnpm
pnpm add -D vite

Prerequisites

# 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

Project Creation

Create New Projects

# 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

Available Templates

# 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

Project Structure

# 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)

Development Server

Starting Development Server

# 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

Development Server Options

# 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 Replacement (HMR)

// 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
  });
}

Configuration

Basic Configuration

// 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'
  }
});

Advanced Configuration

// 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']
  }
});

Conditional Configuration

// 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;
});

Build Process

Building for Production

# 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

Build Configuration

// 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'
    }
  }
});

Preview Built Application

# Preview production build
npm run preview

# Preview with specific port
npm run preview -- --port 4173

# Preview with HTTPS
npm run preview -- --https

Plugin System

Official Plugins

# 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 Configuration

// 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']
      }
    })
  ]
});

Popular Community Plugins

# 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
```### Sviluppo di Plugin Personalizzati
```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')) {
        return `export default ${JSON.stringify(code)}`;
      }
    }
  };
}

// Use custom plugin
export default defineConfig({
  plugins: [myPlugin()]
});
```## Variabili d'Ambiente
```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
```### Esempi di Variabili d'Ambiente
```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
```### Utilizzo delle Variabili d'Ambiente
```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
```### Variabili d'Ambiente TypeScript
```typescript
// vite-env.d.ts
interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string;
  readonly VITE_API_URL: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}
```## Gestione degli Asset
```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 });
```### Asset Statici
```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
```### Directory Pubblica
```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]`;
        }
      }
    }
  }
});
```### Elaborazione degli Asset
```css
/* styles.module.css */
.button {
  background: blue;
  color: white;
}

.button:hover {
  background: darkblue;
}

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

function Button() {
  return <button className={styles.button}>Click me</button>;
}
```## Elaborazione CSS
```bash
# Install preprocessors
npm install --save-dev sass
npm install --save-dev less
npm install --save-dev stylus

// 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)
        }
      }
    }
  }
});
```### Moduli CSS
```bash
# Install PostCSS plugins
npm install --save-dev autoprefixer
npm install --save-dev tailwindcss
npm install --save-dev postcss-nested

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    'postcss-nested': {}
  }
};
```### Preprocessori CSS
```bash
# Install CSS-in-JS libraries
npm install styled-components
npm install @emotion/react @emotion/styled
npm install @stitches/react
```### Integrazione PostCSS
```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" }]
}
```### Supporto CSS-in-JS
```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
  }
});
```## Supporto TypeScript
```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"
  }
}
```### Configurazione TypeScript
```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' } }); ### TypeScript nella Configurazione Vitejavascript // src/test/setup.ts import '@testing-library/jest-dom';

// Mock environment variables Object.defineProperty(import.meta, 'env', { value: { VITE_API_URL: 'http://localhost:3000' } }); ### Verifica dei Tipijavascript // src/components/Button.test.tsx import { render, screen } from '@testing-library/react'; import { Button } from './Button';

test('renders button with text', () => { render(Click me); expect(screen.getByRole('button')).toHaveTextContent('Click me'); }); ## Integrazione Testjson { "scripts": { "test": "vitest", "test:ui": "vitest --ui", "test:run": "vitest run", "coverage": "vitest run --coverage" } } ### Configurazione Vitestbash

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 ### Distribuzione Dockerdockerfile

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;"] ### Pipeline CI/CDyaml

.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 }}

## Ottimizzazione delle Prestazionibash

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 }) ] }); ### Analisi del Bundlejavascript // 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')) } ]; ### Code Splittingjavascript // 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'] } }); ### Configurazione di Ottimizzazionejavascript // 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); ### Monitoraggio delle Prestazionibash

Find process using port

lsof -ti:3000

Kill process

kill -9 $(lsof -ti:3000)

Use different port

npm run dev -- --port 3001 ## Risoluzione dei Problemijavascript // vite.config.js export default defineConfig({ resolve: { alias: { '@': path.resolve(__dirname, './src') }, extensions: ['.js', '.ts', '.jsx', '.tsx', '.vue'] } }); ### Problemi Comunibash

Clear cache

rm -rf node_modules/.vite

Reinstall dependencies

rm -rf node_modules package-lock.json npm install

Force rebuild

npm run build -- --force #### Porta già in Usobash

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" } } #### Problemi di Risoluzione dei Modulibash

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 #### Errori di Buildjavascript // 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); } } } }); #### Problemi di Memoriabash

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 ### Modalità Debugjavascript // 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 } }); ### Debug delle Prestazionijavascript // 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; } ## Migliori Pratichejavascript // 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'); } } } }); ### Struttura del Progettojson { "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" } } ```### Gestione della Configurazione