Notre avis
Configure l'outil de build Vite avec des alias d'importation, un proxy et une division optimisée des bundles.
Points forts
- Simplifie les imports avec l'alias @
- Fournit une configuration proxy pour le développement
- Permet le fractionnement manuel des chunks pour les bibliothèques
- Gère les variables d'environnement avec le préfixe VITE_
Limites
- Nécessite de configurer à la fois vite.config.ts et tsconfig.json pour les alias
- Les variables d'environnement doivent être préfixées par VITE_
- Peut nécessiter des connaissances Webpack pour la migration
Lors de la configuration d'un nouveau projet Vite ou de l'optimisation d'un projet existant pour un développement et des builds efficaces.
Lors de l'utilisation d'un autre outil de build (Webpack, Parcel) ou pour des sites statiques simples sans configuration complexe.
Analyse de sécurité
SûrThe skill provides Vite configuration guidance with no destructive commands, obfuscated code, or data exfiltration. The listed Bash commands are standard development commands and pose no risk.
Aucun point d'attention détecté
Exemples
Configure Vite with @ alias pointing to ./src in both vite.config.ts and tsconfig.json.Set up a Vite proxy to forward /api requests to http://localhost:3000.Configure Vite build to split vendor libraries (react, react-dom, react-router-dom, @tanstack/react-query, recharts) into separate chunks.name: vite description: > Vite build tool patterns and configuration. Trigger: When configuring Vite, setting up aliases, or resolving build issues. license: MIT metadata: author: migestion version: '1.0' scope: [web] auto_invoke: 'Working with Vite configuration' allowed-tools: Read, Edit, Write, Glob, Grep, Bash, WebFetch, WebSearch, Task
Import Aliases (REQUIRED)
// vite.config.ts
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
});
// tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
Usage
// ✅ ALWAYS: Use @ alias
import { Button } from '@/components/ui/Button';
import { useClientsStore } from '@/stores/clients.store';
// ❌ NEVER: Relative imports
import { Button } from '../../../components/ui/Button';
Configuration
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
server: {
port: 5173,
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
},
},
},
build: {
outDir: 'dist',
sourcemap: true,
rollupOptions: {
output: {
manualChunks: {
vendor: ['react', 'react-dom'],
vendor-router: ['react-router-dom'],
vendor-query: ['@tanstack/react-query'],
vendor-charts: ['recharts'],
},
},
},
},
});
Environment Variables
// ✅ Client-side variables (VITE_ prefix)
const apiUrl = import.meta.env.VITE_API_URL;
// ✅ With fallback
const apiUrl = import.meta.env.VITE_API_URL || 'http://localhost:3000';
// ✅ Type-safe
interface ImportMetaEnv {
readonly VITE_API_URL: string;
readonly VITE_SOCKET_URL: string;
}
interface ImportMeta {
readonly env: ImportMetaEnv;
}
Commands
npm run dev:web # Start dev server (port 5173)
npm run build:web # Build for production
npm run preview # Preview production build
Asset Imports
// ✅ Images
import logo from '@/assets/logo.png';
<img src={logo} alt="Logo" />
// ✅ CSS
import './styles.css';
// ✅ JSON
import data from './data.json';
Related Skills
migestion-web- MiGestion Web patternsreact-18- React component patterns
Expert Next.js App Router
Developpement
Un skill qui transforme Claude en expert Next.js App Router.
Générateur de README
Developpement
Crée des README.md professionnels et complets pour vos projets.
Rédacteur de Documentation API
Developpement
Génère de la documentation API complète au format OpenAPI/Swagger.