react-app-rewired

react-app-rewired est un outil pour développeurs qui permet de remplacer et de personnaliser la configuration webpack des projets Create React App (CRA) sans utiliser la commande « eject ». Il conserve les avantages de la configuration zéro de CRA tout en offrant aux développeurs la flexibilité nécessaire pour ajouter des plugins, des loaders et d'autres personnalisations. L'outil fonctionne en interceptant les commandes standard de react-scripts (start, build, test) et en appliquant les remplacements définis par l'utilisateur à partir d'un fichier config-overrides.js. Ce fichier peut exporter soit une seule fonction pour la personnalisation de webpack, soit un objet avec des fonctions distinctes pour les configurations webpack, Jest, devServer et paths. Les capacités clés incluent : la personnalisation des règles et plugins webpack pour les builds de développement et de production ; la modification de la configuration de test Jest, y compris les modèles de chemins de test et les presets Babel ; le remplacement de la configuration du serveur de développement Webpack pour les certificats HTTPS et les paramètres de proxy ; et l'ajustement des chemins de projet transmis à webpack et Jest. Le projet prend en charge à la fois CRA 1.x (Webpack 3) et CRA 2.x (Webpack 4), la version 2.0 supprimant les fonctions d'aide de rewire au profit d'une configuration directe. Il prend également en charge les packages react-scripts personnalisés via le drapeau --scripts-version, permettant une utilisation avec des variantes TypeScript comme react-scripts-ts. Il existe un vaste écosystème communautaire de plugins rewire pour les cas d'utilisation courants, notamment les plugins Babel (emotion, lodash, styled-components), les plugins webpack (favicons, imagemin, bundle analyzer) et les loaders (TypeScript, SCSS, SVG, YAML). Le fichier config-overrides peut également être spécifié comme un répertoire pour une organisation modulaire ou transmis via la ligne de commande pour plus de flexibilité. Avertissements importants : l'utilisation de react-app-rewired rompt les garanties officielles de CRA, ce qui signifie que vous possédez la configuration et ne bénéficiez d'aucun support officiel. L'auteur recommande Next.js ou Razzle pour les projets nécessitant une configuration webpack personnalisée étendue dès le départ. Des alternatives comme customize-cra, Rescripts et craco sont également disponibles pour la compatibilité CRA 2.0+.