Κατανόηση Εξαρτήσεων στην Αντιδρούν Γηγενείς

Σε React Native, εξαρτήσεις συνήθως διαχειρίζονται μέσω npm ή νήματα ⁇ JavaScript διαχειριστές πακέτων που χειρίζονται την εγκατάσταση της βιβλιοθήκης, ενημερώσεις, έλεγχο έκδοσης, και μερικές φορές ακόμα και εγγενή σύνδεση κώδικα. Σε αντίθεση με μια τυπική εφαρμογή web, React Native έργα συχνά δέσμη εξαρτήσεις JavaScript παράλληλα με εγγενείς εξαρτήσεις (iOS CocoaPods, αρχεία Android Gradle), καθιστώντας την διαχείριση εξάρτησης πιο αριθμημένη.

Οι εξαρτήσεις εμπίπτουν σε δύο κατηγορίες:

  • JavaScript εξαρτήσεις ⁇ καθαρές βιβλιοθήκες JS (π.χ., ], ) που λειτουργούν χωρίς καμία εγγενή διαμόρφωση.
  • Native εξαρτήσεις ⁇ βιβλιοθήκες που απαιτούν γεφύρωση με εγγενή κώδικα (π.χ., , ).

Η Αντιμετώπιση Native τεκμηρίωση[ παρέχει λεπτομέρειες σχετικά με την αρχικοποίηση ενός έργου και του δέντρου εξάρτησής του.

Εγκατάσταση εξαρτήσεων

Για να προσθέσετε μια νέα βιβλιοθήκη στο React Native project σας, χρησιμοποιήστε την εντολή εγκατάστασης του διαχειριστή πακέτων. Για παράδειγμα, για να εγκαταστήσετε [[LFT:0]] την πλοήγηση [[LFT:1], εκτελέστε:

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

ή με νήματα:

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

Μετά την εγκατάσταση, ορισμένες βιβλιοθήκες απαιτούν σύνδεση του φυσικού κώδικα. Σε React Native 0,60+, αυτόματη σύνδεση χειρίζεται αυτόματα τις περισσότερες εγγενείς εξαρτήσεις. Ωστόσο, ορισμένες βιβλιοθήκες (ειδικά εκείνες με έθιμο εγγενείς απόψεις ή SDKs τρίτων μερών) εξακολουθούν να απαιτούν χειροκίνητα βήματα:

  • Για iOS: τρέξτε ή για να εγκαταστήσετε το λοβό CocoaPods.
  • Για Android: το της βιβλιοθήκης συγχωνεύεται αυτόματα, αλλά μπορεί να χρειαστεί να προσθέσετε ένα αποθετήριο ή να τροποποιήσετε εάν το πακέτο React Native της βιβλιοθήκης δεν είναι αυτόματα καταχωρημένο.

Πάντα ελέγξτε τον οδηγό εγκατάστασης της βιβλιοθήκης ⁇ πολλές δημοφιλείς βιβλιοθήκες μετά-εγκαταστήστε τα βήματα για να αποφύγετε τις καταρρεύσεις του χρόνου λειτουργίας.

Χρήση του συνδέσμου αντίδρασης- NPx (Legacy)

Για τα έργα που χρησιμοποιούν React Native <0.60, θα πρέπει να συνδέσετε χειροκίνητα τις εγγενείς εξαρτήσεις με [. Αυτή η εντολή τροποποιεί το Podfile σας ή/και [[LFT:13]]. Αν διατηρείτε ένα έργο κληρονομιάς, σκεφτείτε να μεταναστεύσετε σε αυτόματη σύνδεση με [[LFT:14]].

Αποθήκευση εξαρτήσεων

Εξ ορισμού, npm και νήματα αποθηκεύουν εγκατεστημένα πακέτα σας package.json[[LFT:1]] αρχείο κάτω από την [[LFT:15]] ή [[LFT:16]]. Αυτό παρακολουθεί όλες τις εξαρτήσεις και τις σειρές εκδόσεων τους, εξασφαλίζοντας ότι άλλοι προγραμματιστές ή περιβάλλοντα ανάπτυξης μπορούν να εγκαταστήσουν το ίδιο σύνολο πακέτων με μια ενιαία εντολή ([[LFT:17]] ή [[LFT:18]]]).

Όταν εγκαθιστάτε ένα πακέτο χωρίς να το επισημαίνετε ρητά ως εξάρτηση από την dev, αποθηκεύεται στο [[[LFT:19]]]. Για εργαλεία που χρησιμοποιούνται μόνο κατά την ανάπτυξη (π.χ., [[LFT:20]]], [[LFT:21]]], [[LFT:22]]]), χρησιμοποιήστε:

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

Η διατήρηση ενός ξεκάθαρου διαχωρισμού μεταξύ του χρόνου λειτουργίας και των αποσυνδέσεων μειώνει το μέγεθος του πακέτου στην παραγωγή και αποτρέπει την τυχαία ένταξη των οικοδομών ⁇ χρόνο κοινής ωφέλειας στο αρχείο του καταστήματος εφαρμογών.

Διαχείριση εκδόσεων εξάρτησης

Καθορίζοντας ακριβείς εκδόσεις στο package.json[[LFT:1]] βοηθά στην πρόληψη απροσδόκητων προβλημάτων που προκαλούνται από ενημερώσεις. Μπορείτε να χρησιμοποιήσετε σημασιολογική έκδοση (semver) για τον έλεγχο ενημερώσεων:

  • ⁇ δέχεται οποιαδήποτε έκδοση ελάσσονος σημασίας ή patch πάνω από 1.0.0 (π.χ., 1.1.0, 1.2.5) αλλά όχι 2.0.0.
  • ⁇ δέχεται μόνο εκδόσεις patch πάνω από 1.0.0 (π.χ., 1.0.1, 1.0.9) αλλά όχι 1.1.0.
  • ⁇ καρφωμένο στην έκδοση 1.0.0 (χωρίς ενημερώσεις).

Για εφαρμογές παραγωγής, συνδέστε τις άμεσες εξαρτήσεις σας σε ακριβείς εκδόσεις (π.χ., [[LFT:27]]) για να αποφύγετε τυχαίες αλλαγές κατά την εγκατάσταση. Χρησιμοποιήστε ένα αρχείο κλειδώματος ([[LFT:28]]] ή [[LFT:29]]]) για να εγγυηθείτε ότι κάθε εγκατάσταση παράγει πανομοιότυπα δέντρα [[LFT:30]].

Επίλυση συγκρούσεων έκδοσης

Όταν δύο βιβλιοθήκες απαιτούν διαφορετικές εκδόσεις του ίδιου πακέτου, μπορεί να συναντήσετε προειδοποιήσεις εξάρτησης από ομοτίμους ή λάθη χρόνου εκτέλεσης. Εργαλεία για την επίλυση συγκρούσεων:

  • npm ls package-name[[LFT:1]] ⁇ εμφανίζει το δέντρο εξάρτησης και τονίζει αντίγραφα.
  • γιαρν γιατί το πακέτο-όνομα ⁇ εξηγεί γιατί ένα πακέτο είναι εγκατεστημένο.
  • npm dedupe / yarn-dededuplicate ⁇ ισοπεδώνει τα διπλά πακέτα όπου είναι δυνατόν.

Για την Αντιδραστική Native, δώστε επιπλέον προσοχή σε αντικρουόμενες εκδόσεις του , ], ή σε αυτόχθονες ενότητες όπως [. Ασυνεπής εκδόσεις μπορεί να προκαλέσει κρυπτογραφικά λάθη όπως “Μη εύρεση της Native module”.

Ενημέρωση εξαρτήσεων

Η τακτική ενημέρωση των εξαρτήσεων είναι ζωτικής σημασίας για την ασφάλεια, την απόδοση και την πρόσβαση σε νέα χαρακτηριστικά.

  • Ελάχιστες/ανακαινίσεις ανταλλαγής: ] ή ⁇ ασφαλείς για μη διασπώμενες αλλαγές.
  • Μεγάλες ενημερώσεις: χειροκίνητα χτυπά την έκδοση στο ] και τρέχει . Επανεξέτασε το χρονοδιάγραμμα αλλαγής της βιβλιοθήκης για την διακοπή αλλαγών API.
  • Διαδραστική αναβάθμιση: χρήση [[LFT:38]] (εγκαταστάθηκε ξεχωριστά) για να δούμε ποια πακέτα έχουν τελευταίες εκδόσεις, κατόπιν επιλεκτικά ενημέρωση.

Κατά την ενημέρωση πυρήνα React Native εαυτό ([[LFT:39]] πακέτο), πάντα ακολουθήστε την επίσημη [[LFT:0]]React Native οδηγός αναβάθμισης[[[LFT:1]] και χρησιμοποιήστε [[[LFT:40]] για να συγχωνεύσετε αλλαγές στα αρχεία προτύπων του έργου σας. Δοκιμάστε διεξοδικά τόσο σε iOS όσο και σε Android προσομοιωτές και πραγματικές συσκευές μετά από οποιαδήποτε σημαντική ενημέρωση.

Αυτόματη ενημέρωση με CI/CD

Σε έναν συνεχή αγωγό ολοκλήρωσης, στήστε μια εργασία που λειτουργεί ή [ περιοδικά, δημιουργεί μια αίτηση έλξης για μικρές ενημερώσεις, και ενεργοποιεί πλήρεις σουίτες δοκιμών.

Αφαίρεση μη χρησιμοποιηθεισών εξαρτήσεων

Όταν μια βιβλιοθήκη δεν χρησιμοποιείται πλέον, αφαιρέστε το για να μειώσετε το μέγεθος του πακέτου και απλοποιήστε τη συντήρηση:

npm uninstall library-name
yarn remove library-name

Τα μη χρησιμοποιημένα πακέτα μπορούν να παραμείνουν σε [[LFT:44]] ακόμη και μετά την αφαίρεση τους αν ήταν παροδικές εξαρτήσεις. Εκτέλεση [[LPT:45]] ή [[LFT:46]] για να διαγράψετε τα ξένα πακέτα. Για έναν πιο διεξοδικό καθαρισμό, εξετάστε:

  • depcheck ⁇ ένα εργαλείο που προσδιορίζει τις μη χρησιμοποιηθείσες εξαρτήσεις στη βάση κώδικα σας.
  • npx react-native unlink library-name (legacy) ⁇ αφαιρεί κάθε εγγενή συνδετικά αντικείμενα.

Βέλτιστες Πρακτικές για Διαχείριση Εξαρτήσεων

  • Κανονική αναθεώρηση και ενημέρωση εξαρτήσεων. Προγραμματίστε ένα μηνιαίο “έλεγχο της εξάρτησης” ⁇ έλεγχος για συμβούλους ασφαλείας (), ενημέρωση σε τελευταίες σταθερές εκδόσεις, και καθαρίστε τα ξεπερασμένα πακέτα.
  • Διατηρήστε τις εξαρτήσεις από τις ελάχιστες που απαιτούνται. Αποφύγετε τις βιβλιοθήκες «βυθιστή κουζίνας», επιλέξτε εστιασμένες, καλά διατηρημένες εναλλακτικές λύσεις (π.χ., για τα εικονίδια αντί να εισαγάγετε ένα ολόκληρο κιτ UI).
  • Χρησιμοποιήστε σημασιολογική έκδοση για τον έλεγχο ενημερώσεων. Pin μεγάλες εκδόσεις και βασιστείτε σε αρχεία κλειδώματος για αναπαραγωγιμότητα.
  • Δοκιμάστε προσεκτικά μετά την ενημέρωση εξαρτήσεων. Εκτέλεση δοκιμών μονάδων, δοκιμές ολοκλήρωσης και χειροκίνητες δοκιμές UI και στις δύο πλατφόρμες. Δώστε προσοχή στην τροποποιημένη συμπεριφορά των εγγενών μονάδων.
  • Διατηρήστε ένα καθαρό και κλειδώστε αρχεία. Αποφύγετε χειροκίνητες επεξεργασίες που μπορούν να εισαγάγουν ασυνέπειες. Δεσμευτείτε ή για τον έλεγχο έκδοσης για να διασφαλίσετε πανομοιότυπες εγκαταστάσεις σε περιβάλλοντα.
  • Προτιμήστε το νήμα πάνω από npm αν χρειάζεστε ντετερμινιστικές εγκαταστάσεις και χώρους εργασίας. Το Yarn Berry (v2+) προσφέρει το Plug'n'Play, το οποίο μπορεί να επιταχύνει τις εγκαταστάσεις αλλά μπορεί να απαιτήσει ελέγχους συμβατότητας με React Native.
  • Χρησιμοποιήστε για να διαγνώσετε κοινά θέματα εξάρτησης και περιβάλλοντος πριν την αποσφαλμάτωση.

Χειρισμός των γηγενών εξαρτήσεων με κακάοPods και Gradle

Για iOS, πάντα δεσμευθείτε να κλειδώσετε τις εκδόσεις των εγγενών λοβών. Εκτελέστε [[LFT:54]] όταν αναβαθμίσετε μια βιβλιοθήκη React Native για να πάρετε την τελευταία συμβατή έκδοση λοβού. Για Android, βεβαιωθείτε ότι [[LFT:55]] δεν έχετε αντικρουόμενες [[LFT:56]]] ή τιμές σε όλες τις βιβλιοθήκες.

Χρήση μονορεπό με React Native

Εάν το έργο σας χρησιμοποιεί ένα monorepo (π.χ., Nx, Turborepo, Lerna), διαχειριστείτε εξαρτήσεις στο ριζικό επίπεδο με χώρους εργασίας. Να είστε προσεκτικοί με την ανύψωση ⁇ μερικές Βιβλιοθήκες React Native μπορεί να απαιτούν [[[LFT:58]] επιλογές για την αποφυγή διερχόμενων συγκρούσεων εξάρτησης.

Συχνές Παγίδες και Πώς να τις Αποφύγετε

  • “Δεν μπορείτε να βρείτε το άρθρωμα” σφάλματα μετά την εγκατάσταση npm: Διαγράψτε , , και εκτελέστε νέα εγκατάσταση. Αν χρησιμοποιείτε νήματα, διαγράψτε [] επίσης (αλλά να είστε προσεκτικοί με τα αρχεία κλειδώματος).
  • ]Το iOS build αποτυγχάνει αφού προσθέσει μια βιβλιοθήκη: Βεβαιωθείτε ότι τρέξατε και ότι το podfile της βιβλιοθήκης αναφέρεται σωστά. Ελέγξτε τα αρχεία καταγραφής κατασκευής Xcode για τα σφάλματα “δεν βρέθηκε βιβλιοθήκη”.
  • Συντριβή του χρόνου λειτουργίας του Android λόγω ελλείπουσας μητρικής ενότητας: Επιβεβαιώστε ότι το πακέτο Android της βιβλιοθήκης είναι αυτόματα καταχωρημένο ή ότι προσθέτετε χειροκίνητα το στην ].
  • Δυοπλήρες σύμβολο ή συγκρούσεις μεθόδου: Χρησιμοποιήστε [] και επιλύστε αντικρουόμενους φυσικούς κώδικες αναβαθμίζοντας ή υποβαθμίζοντας μία από τις βιβλιοθήκες.

Εξωτερικοί πόροι

Ακολουθώντας αυτές τις πρακτικές θα εξορθολογίσει την ανάπτυξη, τη μείωση των πιθανών ζητημάτων που προκαλούνται από ξεπερασμένες ή ασυμβίβαστες βιβλιοθήκες, και να επιτρέψει στην ομάδα σας να επικεντρωθεί σε κατασκευαστικά χαρακτηριστικά και όχι την καταπολέμηση της κόλασης εξάρτηση.