Pulse
ae39e45460
NOVAS SKILLS: - next-best-practices v0.1.0 (CLEAN) — Next.js App Router, RSC, caching, data - nextjs-patterns v1.0.0 (CLEAN) — Next.js 15: Server Actions, route handlers - vite v1.0.0 (CLEAN) — env vars, aliases, proxy, CJS compat - uncle-bob v1.0.0 (CLEAN) — Clean Code, SOLID, Clean Architecture - clean-code-review v1.0.0 (CLEAN) — naming, guard clauses, anti-patterns, refactoring - vue v1.0.0 (CLEAN) — Vue framework - vue-composition-api-best-practices v1.0.0 (CLEAN) — composables, Pinia, reactivity BIBLIOTECA INTELIGENTE libs/ (10 dominios, 11 arquivos): - typescript/ — TS safe + generics gotchas - react/ — Next.js App Router + Vite config - vue/ — Composition API + Pinia - linux/ — System diagnostic cheatsheet - database/ — PostgreSQL + MySQL patterns - browser/ — Chromium CLI + E2E testing - security/ — SAST audit (OWASP Top 10) - best-practices/ — Clean Code + SOLID + Clean Architecture - deploy/ — Docker multi-stack + OpenClaw ops - + INDEX.md como guia de navegacao .learnings/ — LRN-20260519-003 criado (biblioteca compartilhada)
85 lines
4.4 KiB
Markdown
85 lines
4.4 KiB
Markdown
---
|
|
name: Vite
|
|
description: Configure and optimize Vite for development, production builds, and library bundling.
|
|
metadata: {"clawdbot":{"emoji":"⚡","requires":{"bins":["node"]},"os":["linux","darwin","win32"]}}
|
|
---
|
|
|
|
# Vite Patterns
|
|
|
|
## Environment Variables
|
|
- Only `VITE_` prefixed vars are exposed to client code — `DB_PASSWORD` stays server-side, `VITE_API_URL` is bundled
|
|
- Access via `import.meta.env.VITE_*` not `process.env` — process.env is Node-only and undefined in browser
|
|
- `.env.local` overrides `.env` and is gitignored by default — use for local secrets
|
|
- `import.meta.env.MODE` is `development` or `production` — use for conditional logic, not `NODE_ENV`
|
|
|
|
## CommonJS Compatibility
|
|
- Pure ESM by default — CommonJS packages need `optimizeDeps.include` for pre-bundling
|
|
- `require()` doesn't work in Vite — use `import` or `createRequire` from `module` for dynamic requires
|
|
- Some packages ship broken ESM — add to `ssr.noExternal` or `optimizeDeps.exclude` and let Vite transform them
|
|
- Named exports from CommonJS may fail — use default import and destructure: `import pkg from 'pkg'; const { method } = pkg`
|
|
|
|
## Dependency Pre-bundling
|
|
- Vite pre-bundles dependencies on first run — delete `node_modules/.vite` to force rebuild after package changes
|
|
- Large dependencies slow down dev server start — add rarely-changing ones to `optimizeDeps.include` for persistent cache
|
|
- Linked local packages (`npm link`) aren't pre-bundled — add to `optimizeDeps.include` explicitly
|
|
- `optimizeDeps.force: true` rebuilds every time — only for debugging, kills dev performance
|
|
|
|
## Path Aliases
|
|
- Configure in both `vite.config.ts` AND `tsconfig.json` — Vite uses its own, TypeScript uses tsconfig
|
|
- Use `path.resolve(__dirname, './src')` not relative paths — relative breaks depending on working directory
|
|
- `@/` alias is not built-in — must configure manually unlike some frameworks
|
|
|
|
```typescript
|
|
// vite.config.ts
|
|
resolve: {
|
|
alias: { '@': path.resolve(__dirname, './src') }
|
|
}
|
|
```
|
|
|
|
## Dev Server Proxy
|
|
- Proxy only works in dev — production needs actual CORS config or reverse proxy
|
|
- `changeOrigin: true` rewrites Host header — required for most APIs that check origin
|
|
- WebSocket proxy needs explicit `ws: true` — HTTP proxy doesn't forward WS by default
|
|
- Trailing slashes matter: `/api` proxies `/api/users`, `/api/` only proxies `/api//users`
|
|
|
|
```typescript
|
|
server: {
|
|
proxy: {
|
|
'/api': {
|
|
target: 'http://localhost:3000',
|
|
changeOrigin: true,
|
|
rewrite: path => path.replace(/^\/api/, '')
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
## Static Assets
|
|
- `public/` files served at root, not processed — use for favicons, robots.txt, files that need exact paths
|
|
- `src/assets/` files are processed, hashed, can be imported — use for images, fonts referenced in code
|
|
- Import assets to get resolved URL: `import logo from './logo.png'` — hardcoded paths break after build
|
|
- `new URL('./img.png', import.meta.url)` for dynamic paths — template literals with variables don't work
|
|
|
|
## Build Optimization
|
|
- `build.rollupOptions.output.manualChunks` for code splitting — without it, one giant bundle
|
|
- Analyze bundle with `rollup-plugin-visualizer` — find unexpected large dependencies
|
|
- `build.target` defaults to modern browsers — set `'es2015'` for legacy support, but increases bundle size
|
|
- `build.cssCodeSplit: true` (default) — each async chunk gets its own CSS file
|
|
|
|
## Library Mode
|
|
- `build.lib` for npm packages — different config from app mode
|
|
- Set `external` for peer dependencies — don't bundle React/Vue into your library
|
|
- Generate types separately with `tsc` — Vite doesn't emit `.d.ts` files
|
|
- Both ESM and CJS outputs: `formats: ['es', 'cjs']` — some consumers still need require()
|
|
|
|
## HMR Issues
|
|
- Circular imports break HMR — refactor to break the cycle or full reload triggers
|
|
- State lost on HMR means component isn't accepting updates — check for `import.meta.hot.accept()`
|
|
- CSS changes trigger full reload if imported in JS that doesn't accept HMR — import CSS in components that do
|
|
- `server.hmr.overlay: false` hides error overlay — useful for custom error handling but hides issues
|
|
|
|
## SSR Configuration
|
|
- `ssr.external` for Node-only packages — prevents bundling node_modules in SSR build
|
|
- `ssr.noExternal` forces bundling — needed for packages with browser-specific imports
|
|
- CSS imports fail in SSR by default — use `?inline` suffix or configure `css.postcss` for SSR
|