Vite Cheatsheet

▪h1 - Next Generation Frontend Tooling "Clase de inscripción" Vite es una herramienta de construcción que pretende proporcionar una experiencia de desarrollo más rápida y magra para proyectos web modernos. Se compone de un servidor dev que proporciona mejoras de características ricas sobre los módulos nativos de ES, y un comando de construcción que agrupa su código con Rollup. ▪/p] ■/div titulada

########################################################################################################################################################################################################################################################## Copiar todos los comandos

########################################################################################################################################################################################################################################################## Generar PDF seleccionado/button

■/div titulada ■/div titulada

Cuadro de contenidos

• Instalación
• Creación del proyecto
• Development Server
• Configuración
• Proceso de construcción
• Sistema Plugin
• Varias del medio ambiente
• Asset Handling
• CSS Processing
• TypeScript Support
• Testing Integration
• Deployment
• Perfeccionamiento Optimización
• Solucionando
• Las mejores prácticas

Instalación

Instalación global

# Install Vite globally
npm install -g vite

# Using Yarn
yarn global add vite

# Using pnpm
pnpm add -g vite

# Verify installation
vite --version

Instalación específica para proyectos

# Install as dev dependency
npm install --save-dev vite

# Using Yarn
yarn add --dev vite

# Using pnpm
pnpm add -D vite

Prerrequisitos

# 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

Creación de proyectos

Crear nuevos proyectos

# 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

Plantillas disponibles

# 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

Estructura del proyecto

# 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

Start 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

Opciones de desarrollo del servidor

# 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

Reemplazamiento del módulo caliente (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
  });
}

Configuración

Configuración básica

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

Configuración avanzada

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

Configuración condicional

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

Proceso de construcción

Construcción para la producción

# 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

Configuración de construcción

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

Vista previa Aplicación construida

# Preview production build
npm run preview

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

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

Sistema Plugin

Plugins oficiales

# 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

Configuración de plugin

// 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

Desarrollo de Plugin personalizado

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

Medio ambiente

Environment Files

# 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

Environment Variable Ejemplos

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

Utilización de variables ambientales

// 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

TipoScript Environment Variables

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

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

Asset Handling

Activos estaticos

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

Directorio Público

# 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

Procesamiento de activos

// 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 Procesamiento

CSS Módulos

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

CSS Preprocesadores

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

PostCSS Integration

# 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': {}
  }
};

CSS-in-JS Apoyo

# Install CSS-in-JS libraries
npm install styled-components
npm install @emotion/react @emotion/styled
npm install @stitches/react

Soporte TipoScript

Configuración TipoScript

// 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" }]
}

TipoScript en Vite Config

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

Tipo de comprobación

# Run TypeScript compiler for type checking
npx tsc --noEmit

# Add to package.json scripts
{
  "scripts": {
    "type-check": "tsc --noEmit",
    "build": "tsc --noEmit && vite build"
  }
}

Pruebas de integración

Configuración de protestas

# 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

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

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

Configuración de prueba

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

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

Pruebas de ejemplo

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

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

Paquete.json Scripts

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

Despliegue

Hosting estático

# 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

Docker Deployment

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

Optimización del rendimiento

Bundle Analysis

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

Código de división

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

Optimización Configuración

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

Supervisión de la ejecución

// 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);
```_

## Solución de problemas

### Cuestiones comunes

#### Puerto Ya en uso
```bash
# Find process using port
lsof -ti:3000

# Kill process
kill -9 $(lsof -ti:3000)

# Use different port
npm run dev -- --port 3001

Cuestiones relativas a la resolución del módulo

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

Errores de construcción

# Clear cache
rm -rf node_modules/.vite

# Reinstall dependencies
rm -rf node_modules package-lock.json
npm install

# Force rebuild
npm run build -- --force

Cuestiones de memoria

# 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"
  }
}

Modo de depuración

# 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

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

Buenas prácticas

Estructura del proyecto

# 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

Configuration Management

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

Prácticas óptimas de rendimiento

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

Prácticas óptimas de seguridad

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

Development Workflow

{
  "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"
  }
}

-...

Resumen

Vite es una herramienta de construcción poderosa, rápida y moderna que mejora significativamente la experiencia de desarrollo para proyectos de frontend. Las principales ventajas son:

• Lightning Fast: Instant server start and lightning-fast HMR
• Rich Características: TipoScript, JSX, CSS pre-processors support out of the box
• Construido optimizado: Usos Rollup for production builds with advanced optimizations
• Plugin Ecosystem: Extensivo sistema de plugin para la personalización
• Framework Agnostic: Funciona con React, Vue, Svelte y vainilla JavaScript

Para un rendimiento óptimo, apalanque los módulos ES nativos de Vite en desarrollo, configure la división adecuada de códigos para la producción y utilice el rico ecosistema de plugins para mejorar la funcionalidad.

" copia de la funciónToClipboard() {} comandos const = document.querySelectorAll('code'); que todos losCommands = '; comandos. paraCada(cmd = confianza allCommands += cmd.textContent + '\n'); navigator.clipboard.writeText(allCommands); alerta ('Todos los comandos copiados a portapapeles!'); }

función generaPDF() { ventana.print(); } ■/script título