Förstå beroenden i Reagera infödda

Beroende är externa bibliotek eller moduler som ditt projekt bygger på att lägga till funktionalitet, effektivisera utveckling eller förbättra prestanda. I React Native hanteras beroenden vanligtvis via npm eller yarn - JavaScript-pakethanterare som hanterar biblioteksinstallation, uppdateringar, versionskontroll och ibland även inbyggd kodkoppling. Till skillnad från en vanlig webbapp, React Native-projekt paketerar ofta JavaScript-beroende längs med inhemska beroenden (iOS CocoaPods, Android Gradle-filer), vilket gör beroendehanteringen mer nud.

Beroende faller i två kategorier:

  • ]]JavaScript-beroende - rena JS-bibliotek (t.ex. ]]]], ]]]) som fungerar utan någon infödd konfiguration.
  • ] inhemska beroenden[] - bibliotek som kräver överbryggning till inhemsk kod (t.ex. ]]]]], ]]]]]])) Dessa behöver ofta ytterligare inställningssteg som ]] eller manuella Gradle-ändringar.

]React Native dokumentation]] ger detaljer om att inleda ett projekt och dess standardberoende träd.

Installera beroenden

För att lägga till ett nytt bibliotek i ditt React Native-projekt, använd pakethanterarens installationskommando. Till exempel för att installera ] react-navigation], kör:

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

Eller med garn:

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

Efter installationen kräver vissa bibliotek att länka infödd kod. I React Native 0.60+ hanterar auto-länkar automatiskt de flesta inhemska beroenden. Vissa bibliotek (särskilt de med anpassad infödda vyer eller tredjeparts SDK) kräver fortfarande manuella steg:

  • För iOS: kör ] eller ] för att installera CocoaPods-pods.
  • För Android: biblioteket ] fusioneras automatiskt, men du kan behöva lägga till en förvar eller ändra ] om bibliotekets React Native-paket inte är automatiskt registrerat.

Kontrollera alltid bibliotekets installationsguide - många populära bibliotek efter installationssteg för att undvika runtime kraschar.

Använda npx react-native länk (Legacy)

För projekt som använder React Native <0.60 måste du manuellt länka inhemska beroenden med . Detta kommando ändrar din Podfile och/eller ]. Om du upprätthåller ett äldre projekt, överväga att migrera till automatisk länkning med .

Spara beroenden

Som standard, npm och yarn spara installerade paket till din ] package.json ]] filen under ] eller ]]] sektionen. Detta håller reda på alla beroenden och deras versionsintervall, se till att andra utvecklare eller installationsmiljöer kan installera samma uppsättning paket med ett enda kommando ( eller ).

När du installerar ett paket utan att uttryckligen markera det som en dev-beroende, sparas det under ]. För verktyg som endast används under utveckling (t.ex. ]], ]], använd:

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

Att upprätthålla en tydlig separation mellan drifttid och devberoende minskar buntstorleken i produktionen och förhindrar oavsiktlig inkludering av byggtidsverktyg i appbutikens arkiv.

Hantera beroendeversioner

Ange exakta versioner i din ] package.json] hjälper till att förhindra oväntade problem som orsakas av uppdateringar. Du kan använda semantisk version (semalt) för att styra uppdateringar:

  • ] accepterar någon mindre eller lapp version över 1.0.0 (t.ex. 1.1.0, 1.2.5) men inte 2.0.0.0.
  • ] accepterar endast lappversioner över 1.0.0 (t.ex. 1,0.1, 1.0.9) men inte 1.1.0.
  • - fäst vid exakt version 1.0.0 (inga uppdateringar).

För produktionsappar, stifta dina direkta beroenden till exakta versioner (t.ex. ) för att undvika oavsiktliga bryta förändringar under utplacering. Använd en låsfil (]] eller ]) för att garantera att varje installation producerar identiska ] träd.

Lösning av Version Conflicts

När två bibliotek kräver olika versioner av samma paket kan du stöta på varningar för ömsesidigt beroende eller fel i driftstid. Verktyg för att lösa konflikter:

  • ]] npm ls paketnamn - visar beroendet träd och markerar dubbletter.
  • ] garnerar varför paketnamn ] - förklarar varför ett paket är installerat.
  • ]] npm dedupe ] / ]] garn-deduplicate] - plattorna duplicerar paket där så är möjligt.

För React Native, var extra uppmärksam på motstridiga versioner av , ] eller inhemska moduler som ]]. Inkonsekventa versioner kan orsaka kryptiska fel som "Inbyggd modul kan inte hittas."

Uppdatering av beroenden

Regelbundet uppdatering av beroenden är avgörande för säkerhet, prestanda och tillgång till nya funktioner. Använd följande metoder:

  • ] Mindre/Patchuppdateringar: ]] eller ]] - säker för icke-brytande förändringar.
  • ] Stora uppdateringar: manuellt stöta på versionen i ] och kör ]]]. Granska bibliotekets förändringslogg för att bryta API-ändringar.
  • ]Interaktiv uppgradering: ] [] (installerad separat) för att se vilka paket som har senaste versioner, sedan selektivt uppdatera.

När du uppdaterar kärnan React Native själv (]] paketet), alltid följa den officiella ]]React Native uppgraderingsguide ]]] och använd ]] för att sammanfoga ändringar i ditt projekts mallfiler. Testa grundligt på både iOS- och Android-simulatorer och riktiga enheter efter någon större uppdatering.

Automatisera uppdateringar med CI/CD

I en kontinuerlig integration pipeline, inrätta ett jobb som kör ] eller ]] periodiskt, skapar en pull request för mindre uppdateringar och utlöser full test sviter. Detta förhindrar beroende rutt samtidigt som en stabil miljö.

Ta bort oanvända beroenden

När ett bibliotek inte längre används, ta bort det för att minska buntstorleken och förenkla underhållet:

npm uninstall library-name
yarn remove library-name

Oanvända paket kan dröja kvar i även efter borttagning om de var transitiva beroenden. Kör ] eller ] för att ta bort extraneösa paket. För en mer grundlig rengöring, överväga:

  • ]depcheck[] – ett verktyg som identifierar oanvända beroenden i din kodbas.
  • ]]] npx react-native unlink biblioteksnamn (legacy) - tar bort alla infödda länkar artefakter.

Bästa praxis för beroendehantering

  • ] Granska och uppdatera beroenden på regelbundenhet. Planera en månatlig ”beroendegranskning” – kontrollera säkerhetsrådgivning (]), uppdatera till senaste stabila versioner och rensa upp föråldrade paket.
  • ] Behåll beroende av det minimum som krävs. Undvik ”köksänka” bibliotek; välj fokuserade, väl underhållna alternativ (t.ex. ] för ikoner istället för att importera ett helt UI-kit).
  • Använd semantisk version för att styra uppdateringar. Pin stora versioner och förlita sig på låsfiler för reproducerbarhet.
  • Test noggrant efter uppdatering av beroenden. Kör enhetstest, integrationstest och manuell UI-testning på båda plattformarna. Var uppmärksam på förändrat inhemskt modulbeteende.
  • Upprätthåll en ren ] och låsa filer.] Undvik manuella redigeringar som kan införa inkonsekvenser. Begå ] eller ]] till versionskontroll för att säkerställa identiska installationer över miljöer.
  • ]]Ge fram garn över npm om du behöver deterministiska installationer och arbetsytor.]] Yarn Berry (v2+) erbjuder Plug'n'Play, som kan påskynda installationer men kan kräva kompatibilitetskontroller med React Native.
  • ] Använd ] för att diagnostisera vanliga beroende- och miljöfrågor innan felsökning.

Hantera inhemska beroenden med CocoaPods och Gradle

För iOS, alltid begå ] för att låsa versionerna av inhemska pods. Kör ] när du uppgraderar ett Reagera inhemskt bibliotek för att få den senaste kompatibla podversionen. För Android, se till att din inte har motstridiga ]] eller ]] värden över bibliotek.

Använda Monorepos med React Native

Om ditt projekt använder en monorepo (t.ex. Nx, Turborepo, Lerna), hantera beroenden på rotnivå med arbetsytor. Var försiktig med hissning - vissa React Native-bibliotek kan kräva alternativ för att undvika transitiva beroendekonflikter.

Vanliga fallgropar och hur man undviker dem

  • ]"Kan inte hitta modul" fel efter npm installera: Ta bort ], ]] och kör färsk installation. Om du använder garn, ta bort samt (men var försiktig med låsfiler).
  • ] iOS-bygget misslyckas efter att ha lagt till ett bibliotek: ] Se till att du sprang ]] och att bibliotekets podfil är korrekt refererad. Kontrollera Xcode bygga loggar för "bibliotek som inte hittats" fel.
  • Android runtime krasch på grund av saknad inhemsk modul: ]] Verifiera att bibliotekets Android-paket är automatiskt registrerat eller att du manuellt lade till sin ] i .
  • ]]Duplicera symbol- eller metodkonflikter: Använd ] och lösa motstridiga inhemska koder genom att uppgradera eller nedgradera ett av biblioteken.

Externa resurser

Effektiv beroendehantering hjälper till att hålla ditt React Native-projekt säkert, effektivt och underhållbart. Efter dessa metoder kommer att effektivisera utvecklingen, minska potentiella problem som orsakas av föråldrade eller oförenliga bibliotek och låta ditt team fokusera på byggfunktioner snarare än att bekämpa beroende helvete.