#2766: vite.config.ts [DE]

projectforge-webapp/vite.config.ts Vite-Build-Konfiguration · projectforge-webapp/vite.config.ts 62 Zeilen · 59 Code · 1 Kommentar · 2 Leerzeilen

Die Konfigurationsdatei des Vite-Build-Systems, die die webpack-basierte Toolchain von Create React App ersetzt hat. Diese einzelne Datei orchestriert die gesamte Entwicklungs- und Build-Pipeline: JSX/TSX-Transformation über @vitejs/plugin-react, ein benutzerdefiniertes esbuild-Plugin zur Handhabung von JSX in externen .js-Node-Modulen (wie react-rrule-generator), SCSS-Kompilierung, Dev-Server-Proxy zum Java-Backend und Vitest-Testrunner-Konfiguration. Erstellt während der großen Migration, die 43 npm-Sicherheitslücken beseitigte, indem die veraltete react-scripts-Abhängigkeitskette durch Vites schlankeren Tooling-Stack ersetzt wurde.

Architektur

Benutzerdefiniertes Plugin: rruleJsxPlugin

Dies ist der ungewöhnlichste Teil der Konfiguration. Einige npm-Pakete (insbesondere react-rrule-generator) liefern .js-Dateien aus, die JSX-Syntax enthalten, welche Vite normalerweise nur in .jsx-Dateien verarbeitet. Das rruleJsxPlugin fängt Modultransformationen mit enforce: 'pre' ab, erkennt jede .js-Datei aus dem react-rrule-generator-Paket (oder jede node_modules-Datei, die JSX-ähnliche Muster via Regex /<[A-Z]\w*[\s/>]/ enthält) und führt sie mit loader: 'jsx' durch esbuild aus. Dies vermeidet Fehler, wenn Vite auf rohes JSX in .js-Dateien stößt. Die Ausgabe zielt auf das cjs-Format mit esnext-Standard ab.

Plugin-Pipeline

rruleJsxPlugin() läuft zuerst (enforce: pre), um nicht standardmäßige JSX-Dateien zu transformieren, dann übernimmt react() (das offizielle Vite-React-Plugin) die standardmäßige JSX/TSX-Transformation mit Fast-Refresh-Unterstützung.

SCSS-Konfiguration

Die Einstellung css.preprocessorOptions.scss.loadPaths fügt ./node_modules zum SCSS-Importpfad hinzu und ermöglicht @import "bootstrap/scss/bootstrap"-Importe ohne relative Pfadangaben.

Build-Konfiguration

Die Ausgabe erfolgt in build/ (entsprechend der CRA-Konvention), Sourcemaps sind deaktiviert, Minifizierung ist ausgeschaltet (serverseitiges Wicket übernimmt die Asset-Optimierung), und maxParallelFileOps: 1 begrenzt parallele Dateioperationen – ein Workaround für die Erschöpfung von Dateihandles auf manchen Systemen.

Dev-Server-Proxy

Zwei Proxy-Regeln leiten Anfragen an /rs und /rest an http://localhost:8080 (das Spring-Boot-Backend) weiter. Dies ist das entscheidende Element, das baseURL in rest.js als leeren String funktionieren ließ – der Vite-Proxy übernimmt das Präfix-Routing, sodass die React-App immer relative URLs aufruft und der Dev-Server sie transparent an den entsprechenden Backend-Endpunkt weiterleitet.

Testen: Vitest

Ersetzt Jest (CRAs Testrunner). Konfiguriert mit jsdom-Umgebung (browserähnliches DOM für Komponententests), globals: true (damit it, expect, describe ohne Importe funktionieren) und Testdateimustern, die auf .test. und .spec.-Suffixe für alle JS/TS-Varianten passen.

Git-Verlauf

Commit	Was geändert wurde
`bf988bc6d`	Datei im Rahmen der umfassenden Migration von react-scripts zu Vite erstellt. Die gesamte Toolchain wurde eingeführt: Vite-Plugins, der benutzerdefinierte rrule-JSX-Handler, SCSS-Unterstützung, Dev-Proxy mit zwei Backend-Routen, Build-Konfiguration und Vitest-Testrunner-Setup. Diese einzelne Datei ersetzte die gesamte CRA-Webpack-Konfigurationsebene.