At slippe af med node_modules med Yarn Plug'n'Play

Reducer din installationstid op til 70%. Spørg mig hvordan! ?

Enhver, der kender mig, kan bekræfte, at jeg er en langvarig elsker af JavaScript og hele dets økosystem . Som front-end ingeniør har node-baserede pakkeforvaltere været en vigtig del af mit værktøjssæt siden 2013.

Først brugte jeg Bower, som primært var fokuseret på frontend-verdenen. Derefter indså jeg desværre (ok, ikke rigtig ) i 2015, at Bower var ved at dø, og NPM, standardpakkehåndtering for Node, var også vejen at gå til frontend. Det var underligt for mig først at bruge NPM til andre ting end Node-moduler, men jeg blev vant til ideen og migrerede problemfrit.

Endelig, blot et år senere, gav Facebook os Garn, et moderne og lynhurtigt alternativ til NPM. Jeg elskede det ved første øjekast! Men nogle ting var stadig problematiske ...

Arvelige problemer i garn

Udover hastigheden bragte garn en række fordele sammenlignet med NPM-versionen på det tidspunkt, såsom låsefiler, offline-tilstand, netværksmodstandsdygtighed, kontrolsummer og andre. Ikke desto mindre lånte garn nogle kendte problemer fra NPM:

node_modules her, der, overalt

For hvert projekt på din maskine, der bruger NPM eller Garn, node_modulesoprettes der en mappe. Det betyder ikke noget, om 10 projekter bruger nøjagtig den samme version af et givet modul, det kopieres igen og igen til hver node_modulesmappe i disse projekter.

Generering af en ny node_modules-mappe tager virkelig lang tid

Selv ved at tage et stort spring fremad med hensyn til installationshastighed blev garn begrænset af node_modules begrænsninger. Bare oprettelse af node_modules-mappen tager op til 70% af den nødvendige tid til at køre yarn install(med en varm cache). Det er en enorm mængde filer, der skal oprettes på hver installation. Så skyld ikke på garn.

Afhængigheder ikke føjet til package.json

Her er et scenarie for dig: Din app fungerer perfekt under udvikling, men går ned i produktionen. Efter timers efterforskning indser du endelig, at du har glemt at tilføje en afhængighed til din package.json. Ja, det kan ske.

Langsom modulopløsning ved kørsel

Starttiden for din app er stærkt påvirket af den måde, som Node løser afhængigheder på. Det spilder tid på at forespørge filsystemet for at finde ud af, hvor en given afhængighed løses fra.

Garn Plug'n'Play til undsætning!

Alle ovenstående problemer blev løst af Yarn-teamet med frigivelsen af ​​Plug'n'Play-funktionen i september sidste år.

Når du aktiverer PnP, i stedet for at kopiere alle nødvendige filer fra cachen til node_modulesmappen, her er hvad Garn gør:

  1. Det opretter en enkelt fil med statisk opløsningstabeller. Disse tabeller vil indeholde en masse vigtige oplysninger, såsom: pakker tilgængelige i afhængighedstræet, hvordan de relaterer sig imellem dem og deres placering på disken.
  2. En særlig resolver bruges til at hjælpe Node med at finde ud af, hvor hver afhængighed er installeret (under mappen Garncache). Det er udelukkende afhængigt af de opløsningstabeller, der blev oprettet tidligere. Da disse tabeller indeholder information om hele afhængighedstræet, behøver node_modules-opløsningsprocessen ikke længere at foretage en masse statog readdirkalder ved kørsel, hvilket reducerer din apps opstartstid markant. Og da Garn kender alle dine afhængigheder, klager det, hvis du prøver at importere et modul, der ikke er til stede i dit package.json:

Brug af Garn Plug'n'Play

Konvertering af et projekt til brug af PnP er let som 1–2–3. Du skal bare tilføje en installConfigsektion til din package.json, med en pnpnøgle indstillet til true, som denne:

{ "installConfig": { "pnp": true }}
Bemærk: Du har brug for Garn v1.12 + for at kunne bruge Plug'n'Play.

Derefter skal du bare køre, yarn installog alt inde i din node_modulesmappe slettes. Fra nu af løses enhver afhængighed direkte fra Yarn's hot cache.

Brug af PnP i et nyt React-projekt med create-react-app

Hvis du bruger create-react-app 2+, er den gode nyhed, at den fungerer godt med Yarn Plug'n'Play! Bare tilføj --use-pnpindstillingen til create-react-appkommandoen, så er du klar til at gå:

npx create-react-app your-app-name --use-pnp

Mulige problemer

Da intet er perfekt i verden, kan PnP pådrage sig nye problemer, når de bruges i projekter, der er afhængige af en brugerdefineret installationslogik. Hvis du har brug for mere info om disse potentielle nye problemer, kan du finde en detaljeret forklaring i dette papir.

Konklusion

Plug'n'Play løser nogle virkelig irriterende problemer i garn. Derudover forbedrer det dramatisk afhængighedscaching af CI'er, hvilket sparer installationstid og gør det muligt for vores builds at komme lige til det punkt: at køre testene!

Og det er det! Hav det sjovt med Garn PnP.