Vite Cheatsheet¶
__HTML_TAG_61_Vite - Next Generation Frontend Tooling
_
## Tabla de contenidos
- [Instalación](#instalación)
- [Creación del proyecto] (creación del proyecto)
- [Development Server](#development-servidor)
- [Configuración](#configuración)
- [Proceso de construcción]
- [Sistema Plugin] (sistema Plugin)
- [ Variables del medio ambiente] (variables del medio ambiente)
- [Asset Handling](#asset-handling)
- [Procesamiento de CSS] (procesamiento de CSS)
- [TypeScript Support](#typescript-support)
- [Testing Integration] (#testing-integration)
- [Deployment](#deployment)
- [ Optimización de la ejecución](#performance-optimization)
- [Troubleshooting] (#troubleshooting)
- [Prácticas mejores] (prácticas mejores)
## Instalación
## Global installation
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.
# Install Vite globally
npm install -g vite
# Using Yarn
yarn global add vite
# Using pnpm
pnpm add -g vite
# Verify installation
vite --version
# Install as dev dependency
npm install --save-dev vite
# Using Yarn
yarn add --dev vite
# Using pnpm
pnpm add -D vite
# 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
# 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
# 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
# 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)
# 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
# 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
// 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
});
}
// 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'
}
});
// 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']
}
});
// 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 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
// 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 production build
npm run preview
# Preview with specific port
npm run preview -- --port 4173
# Preview with HTTPS
npm run preview -- --https
# 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
// 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']
}
})
]
});
# 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
// 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()]
});
# 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
# .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
// 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
// vite-env.d.ts
interface ImportMetaEnv {
readonly VITE_APP_TITLE: string;
readonly VITE_API_URL: string;
}
interface ImportMeta {
readonly env: ImportMetaEnv;
}
// 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 });
# 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
// 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]`;
}
}
}
}
});
/* 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>;
}
# 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)
}
}
}
}
});
# 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': {}
}
};
# Install CSS-in-JS libraries
npm install styled-components
npm install @emotion/react @emotion/styled
npm install @stitches/react
// 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" }]
}
// 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
}
});
# Run TypeScript compiler for type checking
npx tsc --noEmit
# Add to package.json scripts
{
"scripts": {
"type-check": "tsc --noEmit",
"build": "tsc --noEmit && vite build"
}
}
# 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'
}
});
// src/test/setup.ts
import '@testing-library/jest-dom';
// Mock environment variables
Object.defineProperty(import.meta, 'env', {
value: {
VITE_API_URL: 'http://localhost:3000'
}
});
// 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');
});
{
"scripts": {
"test": "vitest",
"test:ui": "vitest --ui",
"test:run": "vitest run",
"coverage": "vitest run --coverage"
}
}
# 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
# 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 }}
# 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
})
]
});
// 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'))
}
];
// 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']
}
});
// 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);
```_
## Troubleshooting
#### Common Issues
#### Port 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
// vite.config.js
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
},
extensions: ['.js', '.ts', '.jsx', '.tsx', '.vue']
}
});
# Clear cache
rm -rf node_modules/.vite
# Reinstall dependencies
rm -rf node_modules package-lock.json
npm install
# Force rebuild
npm run build -- --force
# 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"
}
}
# 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
// 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);
}
}
}
});
# 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
// 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
}
});
// 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;
}
// 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');
}
}
}
});
{
"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"
}
}