Comment gérer les dépendances et les bibliothèques dans les projets autochtones réagissent

Comprendre les dépendances dans la réaction autochtone

Dans React Native, les dépendances sont généralement gérées via npm ou fil – gestionnaires de paquets JavaScript qui gèrent l'installation de la bibliothèque, mises à jour, contrôle de version, et parfois même le lien de code natif. Contrairement à une application web standard, les projets React Native regroupent souvent les dépendances JavaScript aux côtés des dépendances natives (iOS CocoaPods, fichiers Gradle Android), rendant la gestion de la dépendance plus nuancée.

Les dépendances se répartissent en deux catégories :

• JavaScript dépendances[ – bibliothèques JS pures (par exemple, , ) qui fonctionnent sans configuration native.
• Les dépendances natives – les bibliothèques qui nécessitent une transition vers le code natif (p. ex. , ).Ces bibliothèques nécessitent souvent des étapes de configuration supplémentaires comme ou des modifications manuelles de Gradle.

La documentation React Native fournit des détails sur l'initialisation d'un projet et son arbre de dépendance par défaut.

Installation des dépendances

Pour ajouter une nouvelle bibliothèque à votre projet React Native, utilisez la commande install du gestionnaire de paquets. Par exemple, pour installer react-navigation[, lancez:

npm install @react-navigation/native @react-navigation/stack

ou avec fils:

yarn add @react-navigation/native @react-navigation/stack

Après l'installation, certaines bibliothèques nécessitent une liaison de code natif. Dans React Native 0.60+, le couplage automatique gère automatiquement la plupart des dépendances natives. Cependant, certaines bibliothèques (surtout celles avec des vues natives personnalisées ou des SDK tiers) nécessitent toujours des étapes manuelles :

• Pour iOS: lancez ou pour installer les pods CocoaPods.
• Pour Android : le de la bibliothèque est automatiquement fusionné, mais vous pouvez avoir besoin d'ajouter un dépôt ou de modifier si le paquet react native de la bibliothèque n'est pas enregistré automatiquement.

Consultez toujours le guide d'installation de la bibliothèque – de nombreuses bibliothèques populaires post-installation étapes pour éviter les pannes d'exécution.

Utilisation de la liaison réagissant-native npx (Legacy)

Pour les projets utilisant React Native <0,60, vous devez relier manuellement les dépendances natives avec . Cette commande modifie votre fichier Pod et/ou . Si vous maintenez un projet hérité, envisagez de migrer vers l'auto-lien avec .

Économie de dépendances

Par défaut, npm et fil sauvegardent les paquets installés dans votre package.json fichier sous la section ou . Cela permet de suivre toutes les dépendances et leurs gammes de versions, en veillant à ce que les autres développeurs ou environnements de déploiement puissent installer le même ensemble de paquets avec une seule commande ( ou .

Lorsque vous installez un paquet sans le marquer explicitement comme une dépendance dev, il est sauvegardé sous . Pour les outils utilisés uniquement pendant le développement (par exemple, , , ), utilisez:

npm install --save-dev package-name
yarn add --dev package-name

Le maintien d'une séparation claire entre les dépendances d'exécution et de dev réduit la taille du paquet dans la production et empêche l'inclusion accidentelle des utilitaires de build-time dans l'archive de l'application store.

Gestion des versions de dépendance

Spécifier les versions exactes dans votre package.json aide à prévenir les problèmes inattendus causés par les mises à jour. Vous pouvez utiliser la version sémantique (semver) pour contrôler les mises à jour:

• – accepte toute version mineure ou patch supérieure à 1.0.0 (p. ex., 1.1.0, 1.2.5) mais non 2.0.0.
• – accepte uniquement les versions de patchs supérieures à 1.0.0 (p. ex. 1.0.1, 1.0.9) mais non 1.1.0.
• – épinglé à la version 1.0.0 (pas de mises à jour).

Pour les applications de production, épinglez vos dépendances directes à des versions précises (p. ex. ) pour éviter les ruptures accidentelles pendant le déploiement. Utilisez un fichier de verrouillage ( ou ) pour garantir que chaque installation produit des arbres identiques .

Résolution des conflits de versions

Lorsque deux bibliothèques nécessitent des versions différentes du même paquet, vous pouvez rencontrer des avertissements de dépendance ou des erreurs d'exécution.

• npm ls nom-paquet – affiche l'arborescence de dépendance et met en évidence les duplicata.
• Découvrez pourquoi le nom du paquet – explique pourquoi un paquet est installé.
• npm dedupe / yarn-deduplicate – des paquets de duplicata lorsque c'est possible.

Pour React Native, porter une attention particulière aux versions contradictoires de , , ou des modules natifs comme . Les versions incompatibles peuvent causer des erreurs cryptographiques comme -Native module ne peut pas être trouvé.

Mise à jour des dépendances

La mise à jour régulière des dépendances est essentielle pour la sécurité, les performances et l'accès aux nouvelles fonctionnalités.

• Mini-mise à jour : ou – sans danger pour les changements non-effrayants.
• Major updates: manuellement, cogne la version dans et exécute . Consultez le changelog de la bibliothèque pour casser les modifications de l'API.
• [installé séparément] pour voir quels paquets ont les dernières versions, puis mettre à jour sélectivement.

Lors de la mise à jour du noyau React Native lui-même ( paquet), toujours suivre le React Native guide de mise à jour et utiliser pour fusionner les changements dans vos fichiers modèles de projet. Testez soigneusement sur les simulateurs iOS et Android et les appareils réels après toute mise à jour majeure.

Mises à jour automatiques avec CI/CD

Dans un pipeline d'intégration continue, créez une tâche qui fonctionne ou périodiquement, crée une demande de mise à jour mineure et déclenche des suites de test complètes. Cela empêche la pourriture de dépendance tout en maintenant un environnement stable.

Suppression des dépendances non utilisées

Lorsqu'une bibliothèque n'est plus utilisée, retirez-la pour réduire la taille du paquet et simplifier la maintenance:

npm uninstall library-name
yarn remove library-name

Les paquets non utilisés peuvent s'attarder dans même après leur retrait s'ils étaient des dépendances transitoires. Exécutez ou pour supprimer les paquets étrangers. Pour un nettoyage plus approfondi, considérez:

• depcheck – un outil qui identifie les dépendances inutilisées dans votre base de codes.
• npx react-native unlink library-name (légacy) – supprime tout artefacts de liaison natif.

Meilleures pratiques de gestion de la dépendance

• Regulièrement examiner et mettre à jour les dépendances. Planifier un audit mensuel de dépendance – vérifier les avis de sécurité (), mettre à jour les dernières versions stables et nettoyer les paquets obsolètes.
• Gardez vos dépendances au minimum requis. Évitez les bibliothèques de -Kitchen évier; choisissez des alternatives ciblées et bien entretenues (p. ex. ] pour les icônes au lieu d'importer une trousse d'assurance-chômage complète).
• Utilisez la version sémantique pour contrôler les mises à jour. Pinner les versions majeures et compter sur les fichiers verrouillables pour la reproductibilité.
• Testez attentivement après mise à jour des dépendances. Exécutez des tests unitaires, des tests d'intégration et des tests d'interface utilisateur manuels sur les deux plateformes.
• Maintenir un propre] et verrouiller les fichiers. Éviter les modifications manuelles qui peuvent introduire des incohérences.
• Préférence fil sur npm si vous avez besoin d'installations déterministes et d'espaces de travail. Yarn Berry (v2+) offre Plug'n'Play, qui peut accélérer les installations mais peut nécessiter des vérifications de compatibilité avec React Native.
• pour diagnostiquer les problèmes communs de dépendance et d'environnement avant le débogage.

Manipulation des dépendances autochtones avec les Pois de cacao et Gradle

Pour iOS, toujours engager pour verrouiller les versions des pods natifs. Exécutez lorsque vous mettez à jour une bibliothèque React Native pour obtenir la dernière version de pod compatible. Pour Android, assurez-vous que vos n'ont pas de valeurs contradictoires ou dans toutes les bibliothèques.

Utilisation de monorepos avec React Native

Si votre projet utilise un monorepo (par exemple Nx, Turborepo, Lerna), gérer les dépendances au niveau racine avec des espaces de travail. Attention avec le holding – certaines bibliothèques autochtones de Réaction peuvent exiger des options pour éviter les conflits de dépendance transitoires.

Pièges courants et comment les éviter

• .], et exécuter une installation fraîche. Si vous utilisez du fil, supprimer aussi (mais soyez prudent avec les fichiers de verrouillage).
• iOS build échoue après avoir ajouté une bibliothèque:[ Assurez-vous que vous avez exécuté et que le fichier de podfile de la bibliothèque est correctement référencé. Vérifiez les journaux de construction de Xcode pour les erreurs --library non trouvées.
• Android runtime crash du fait de la disparition du module natif: Vérifiez que le paquet bookworks Android est enregistré automatiquement ou que vous avez ajouté manuellement son dans .
• Le symbole ou la méthode duplicateur est en conflit :[ Utilisez et résolvez les codes natifs contradictoires en mettant à jour ou en déclassant une des bibliothèques.