Vite React Plugin : guide pratique et limites à connaître
vite-plugin-react est l'intégration officielle de Vite pour React qui fournit une actualisation rapide, une prise en charge JSX/TSX, des transformations SWC et une expérience de plugin React avisée.
En bref
- De quoi s’agit-il ?
- Ce que Vite React Plugin apporte, comment le lancer et où vérifier ses limites.
- À qui s’adresse-t-il ?
- Vite React Plugin convient aux lecteurs dont le besoin correspond à include, exclude et le preamble SSR. Il ne convient pas à une intégration qui suppose des plateformes, modèles ou garanties absents du README.
- Puis-je l’utiliser commercialement ?
- Oui. MIT est une licence permissive : vous pouvez utiliser, modifier et vendre un logiciel qui en dépend, à condition de conserver les mentions de droit d’auteur et de licence.
- Est-il encore maintenu ?
- Oui. Les derniers commits datent d’il y a 1 jour.
- En quel langage est-il écrit ?
- Principalement TypeScript, d’après les statistiques de langage de GitHub.
Ces réponses reposent sur les données GitHub du projet (dernière synchronisation le 14 septembre 2026) et sur notre analyse. Elles ne constituent pas un avis juridique.
ANALYSE OPEN SOURCE APPROFONDIE
Le rôle du plugin React
@vitejs/plugin-react est décrit dans les métadonnées du dépôt comme "The all-in-one Vite plugin for React projects" et le README le présente comme le plugin par défaut pour les projets React dans Vite. Selon le README, il active Fast Refresh en développement (nécessite React 16.9 ou supérieur), utilise le runtime JSX automatique et maintient une taille d'installation réduite. Le plugin est écrit en TypeScript et distribué sous licence MIT. Au moment de la capture des métadonnées, le dépôt comptait 1 133 étoiles et 261 forks, bien que le README ne précise pas de numéro de version spécifique pour le plugin ni de comparaison avec d'autres plugins React pour Vite.
Babel, SWC et JSX
Le plugin s'ajoute à un projet Vite en important la fonction react et en la plaçant dans le tableau plugins, comme le montre l'exemple vite.config.js du README. Par défaut, le plugin inclut les fichiers .js, .jsx, .ts et .tsx. L'option include permet d'étendre Fast Refresh à d'autres types de fichiers, comme les fichiers .mdx, et le README illustre la combinaison avec le plugin @mdx-js/rollup à l'aide d'une expression régulière. L'option exclude est définie par défaut sur /node_modules/ et est destinée à exclure les fichiers JSX/TSX qui s'exécutent dans un worker ou qui ne sont pas des fichiers React. Le README conseille de conserver node_modules dans la liste d'exclusion et montre un exemple qui exclut également les motifs /pdf/ et .solid.tsx.
Fast Refresh et exports
Pour la transformation JSX, le plugin utilise par défaut le runtime JSX automatique, une évolution par rapport à l'ancien runtime classique. L'option jsxRuntime permet de revenir à 'classic'. L'option jsxImportSource contrôle d'où est importée la fabrique JSX ; par défaut, elle est déduite du paramètre jsxImportSource dans le fichier tsconfig correspondant au fichier transformé. Le README donne un exemple avec jsxImportSource: '@emotion/react' pour utiliser la fabrique JSX d'Emotion. Ces options donnent aux développeurs un contrôle sur la transformation JSX sans modifier leur code source.
SSR preamble et configuration
Le support du React Compiler est fourni par un helper exporté nommé reactCompilerPreset. Selon le README, ce preset nécessite @rolldown/plugin-babel, babel-plugin-react-compiler et @babel/core comme dépendances peer ; les utilisateurs TypeScript ont également besoin de @types/babel__core. L'exemple de configuration combine react() avec babel({ presets: [reactCompilerPreset()] }) dans vite.config.js. Le preset accepte un objet d'options avec compilationMode, qui peut être défini sur 'annotation' pour compiler uniquement les composants annotés avec "use memo", et target, qui peut être défini sur '17' ou '18' pour les anciennes versions de React, en utilisant react-compiler-runtime au lieu de react/compiler-runtime. Le README note également que reactCompilerPreset est un filtre préconfiguré pratique et montre comment modifier sa propriété rolldown.filter pour exclure des fichiers comme src/legacy/ de la compilation.
Contrôler le build produit
Pour les applications SSR qui n'utilisent pas l'API transformIndexHtml, le plugin fournit un import de sous-chemin @vitejs/plugin-react/preamble pour initialiser le runtime HMR à partir du point d'entrée client. Le README montre l'import de ce module dans entry.client.js. Alternativement, on peut appeler manuellement viteServer.transformIndexHtml pendant le SSR pour générer un code d'initialisation équivalent, comme l'illustre un exemple de serveur Express. Sans ce preamble, le plugin signale l'erreur : "Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong." Le README documente donc deux façons de configurer le preamble pour les applications SSR.
Pour Vite React Plugin, le contrôle doit rester lié à include, exclude et le preamble SSR. Reproduisez d abord l exemple du README, puis observez la sortie exacte, les journaux et les fichiers créés. Une commande réussie ne prouve pas la compatibilité avec toutes les machines : relevez la version, le système, les dépendances et les paramètres effectivement utilisés. Les éléments que la documentation ne décrit pas restent des points à vérifier, pas des garanties. Pour Vite React Plugin, le contrôle doit rester lié à include, exclude et le preamble SSR. Reproduisez d abord l exemple du README, puis observez la sortie exacte, les journaux et les fichiers créés. Une commande réussie ne prouve pas la compatibilité avec toutes les machines : relevez la version, le système, les dépendances et les paramètres effectivement utilisés. Les éléments que la documentation ne décrit pas restent des points à vérifier, pas des garanties.
Conclusion éditoriale
Vite React Plugin convient aux lecteurs dont le besoin correspond à include, exclude et le preamble SSR. Il ne convient pas à une intégration qui suppose des plateformes, modèles ou garanties absents du README. Commencez par un essai minimal avec la commande et la configuration documentées, puis comparez la sortie attendue aux journaux et fichiers réellement produits.
Notes de la communauté