vite.config.ts@vitejs/plugin-react, un plugin personalizado de esbuild para manejar JSX en .js de terceros en node_modules (como react-rrule-generator), compilación SCSS, proxy del servidor de desarrollo hacia el backend Java y configuración del ejecutor de pruebas Vitest. Creado durante la migración importante que eliminó 43 vulnerabilidades npm al reemplazar la cadena de dependencias obsoleta de react-scripts con la pila de herramientas más ligera de Vite.Esta es la parte más inusual de la configuración. Algunos paquetes npm (notablemente react-rrule-generator) incluyen archivos .js que contienen sintaxis JSX, que Vite normalmente solo procesa en archivos .jsx. El rruleJsxPlugin intercepta las transformaciones de módulos con enforce: 'pre', detecta cualquier archivo .js proveniente del paquete react-rrule-generator (o cualquier archivo de node_modules que contenga patrones similares a JSX mediante la expresión regular /<[A-Z]\w*[\s/>]/), y lo procesa con esbuild usando loader: 'jsx'. Esto evita errores de Vite al encontrar JSX sin procesar en archivos .js. La salida tiene como objetivo el formato cjs con el estándar esnext.
rruleJsxPlugin() se ejecuta primero (enforce: pre) para transformar archivos JSX no estándar, luego react() (el plugin oficial de Vite para React) maneja la transformación estándar JSX/TSX con soporte de Fast Refresh.
La configuración css.preprocessorOptions.scss.loadPaths añade ./node_modules a la ruta de importación SCSS, permitiendo importaciones estilo @import "bootstrap/scss/bootstrap" sin necesidad de recorrer rutas relativas.
La salida se dirige a build/ (siguiendo la convención de CRA), los sourcemaps están deshabilitados, la minificación está desactivada (el Wicket del lado del servidor maneja la optimización de assets), y maxParallelFileOps: 1 limita las operaciones paralelas de archivos, una solución para el agotamiento de descriptores de archivos en algunos sistemas.
Dos reglas de proxy redirigen las solicitudes /rs y /rest a http://localhost:8080 (el backend Spring Boot). Esta es la pieza crítica que hizo que baseURL en rest.js funcionara como una cadena vacía: el proxy de Vite maneja el enrutamiento de prefijos, por lo que la aplicación React siempre llama a URLs relativas y el servidor de desarrollo las reenvía de forma transparente al endpoint backend correspondiente.
Reemplaza a Jest (el ejecutor de pruebas de CRA). Configurado con entorno jsdom (DOM similar al navegador para pruebas de componentes), globals: true (para que it, expect, describe funcionen sin importaciones), y patrones de archivos de prueba que coinciden con los sufijos .test. y .spec. para todas las variantes JS/TS.
| Commit | Qué cambió |
|---|---|
bf988bc6d | Creó el archivo como parte de la migración integral de react-scripts a Vite. Introdujo la cadena de herramientas completa: plugins de Vite, el manejador JSX personalizado para rrule, soporte SCSS, proxy de desarrollo con rutas duales al backend, configuración de compilación y configuración del ejecutor de pruebas Vitest. Este único archivo reemplazó toda la capa de configuración de webpack de CRA. |