EN · DE · RU · FR · ES

#2766 : vite.config.ts

projectforge-webapp/vite.config.ts Configuration de build Vite · projectforge-webapp/vite.config.ts 62 lignes · 59 lignes de code · 1 commentaire · 2 lignes vides
Le fichier de configuration du système de build Vite qui a remplacé la chaîne d'outils basée sur webpack de Create React App. Ce fichier unique orchestre l'ensemble du pipeline de développement et de build : transformation JSX/TSX via @vitejs/plugin-react, un plugin esbuild personnalisé pour gérer le JSX dans les .js de node_modules tiers (comme react-rrule-generator), compilation SCSS, proxy du serveur de développement vers le backend Java, et configuration du test runner Vitest. Créé lors de la migration majeure qui a éliminé 43 vulnérabilités npm en remplaçant la chaîne de dépendances obsolète react-scripts par la pile d'outils plus légère de Vite.

Architecture

Plugin personnalisé : rruleJsxPlugin

C'est la partie la plus inhabituelle de la configuration. Certains packages npm (notamment react-rrule-generator) fournissent des fichiers .js contenant de la syntaxe JSX, que Vite ne traite normalement que dans les fichiers .jsx. Le rruleJsxPlugin intercepte les transformations de modules avec enforce: 'pre', détecte tout fichier .js provenant du package react-rrule-generator (ou tout fichier node_modules contenant des motifs de type JSX via l'expression régulière /<[A-Z]\w*[\s/>]/), et le traite via esbuild avec loader: 'jsx'. Cela évite les erreurs de Vite rencontrant du JSX brut dans des fichiers .js. La sortie cible le format cjs avec la norme esnext.

Pipeline de plugins

rruleJsxPlugin() s'exécute en premier (enforce: pre) pour transformer les fichiers JSX non standard, puis react() (le plugin React officiel de Vite) gère la transformation standard JSX/TSX avec le support Fast Refresh.

Configuration SCSS

Le paramètre css.preprocessorOptions.scss.loadPaths ajoute ./node_modules au chemin d'importation SCSS, permettant des imports de style @import "bootstrap/scss/bootstrap" sans traversée de chemin relatif.

Configuration de build

La sortie va dans build/ (suivant la convention CRA), les sourcemaps sont désactivées, la minification est désactivée (le serveur Wicket gère l'optimisation des assets), et maxParallelFileOps: 1 limite les opérations parallèles sur les fichiers — une solution de contournement pour l'épuisement des descripteurs de fichiers sur certains systèmes.

Proxy du serveur de développement

Deux règles de proxy redirigent les requêtes /rs et /rest vers http://localhost:8080 (le backend Spring Boot). C'est l'élément critique qui a permis à baseURL dans rest.js de fonctionner comme une chaîne vide — le proxy Vite gère le routage des préfixes, donc l'application React appelle toujours des URL relatives et le serveur de développement les transmet de manière transparente au point de terminaison backend approprié.

Tests : Vitest

Remplace Jest (le test runner de CRA). Configuré avec l'environnement jsdom (DOM de type navigateur pour les tests de composants), globals: true (pour que it, expect, describe fonctionnent sans imports), et des motifs de fichiers de test correspondant aux suffixes .test. et .spec. pour toutes les variantes JS/TS.

Historique Git

CommitCe qui a changé
bf988bc6dCréation du fichier dans le cadre de la migration complète react-scripts→Vite. Introduction de la chaîne d'outils complète : plugins Vite, gestionnaire JSX personnalisé pour rrule, support SCSS, proxy de développement avec routes backend doubles, configuration de build, et configuration du test runner Vitest. Ce fichier unique a remplacé toute la couche de configuration webpack de CRA.