Notre avis
Fournit des modèles pour configurer l'outil de build Vite, notamment les alias d'importation, les variables d'environnement et l'optimisation du build.
Points forts
- Impose des alias d'importation cohérents pour éviter la complexité des chemins relatifs
- Couvre la configuration essentielle de Vite pour le proxy du serveur de développement et le fractionnement du build
- Inclut la gestion typée des variables d'environnement avec le préfixe VITE_
Limites
- Principalement axé sur les projets React
- Ne couvre pas le développement avancé de plugins Vite
- Suppose une structure de dossiers spécifique (répertoire src)
Lors de la configuration d'un nouveau projet Vite ou de la refactorisation de la configuration pour une meilleure maintenabilité.
Lorsque vous utilisez un autre outil de build comme Webpack ou Parcel, ou lorsque la structure du projet s'écarte significativement des conventions standard.
Analyse de sécurité
SûrThe skill provides static configuration examples and conventions; it does not instruct the AI to execute any dangerous commands or access sensitive resources. The allowed tools include Bash, but the skill itself only refers to standard development commands like npm scripts.
Aucun point d'attention détecté
Exemples
Configure Vite with '@' alias for './src' and proxy '/api' to http://localhost:3000.Split Vite build output into separate vendor chunks for react, react-dom, react-router-dom, and @tanstack/react-query.Add VITE_API_URL and VITE_SOCKET_URL as environment variables with type safety in Vite.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.