Aflați cum să configurați un proiect tematic Gatsby cu Lerna: acest ghid vă va ajuta să înțelegeți ce este un mono-repo și cum să îl gestionați cu Lerna folosind NPM în loc de spații de lucru Fire.

Index

  • ce este Lerna și de ce merită încercat?
  • setarea Lerna cu NPM din shell
  • Schele foldere și fișiere cu shell
  • folosind Lerna
    • alegeți abordarea
  • orchestrați totul cu Lerna bootstrap
  • rulați comenzi și scripturi
  • Expertul de actualizare

ce este Lerna și de ce merită încercat?

am început să urmez cursul Gatsby Theme Authoring de la Jason Lengstorf (@jlengstorf) și în curând mi-am dat seama că nu știu nimic despre ‘Fire Workspaces’. Este un mod destul de a gestiona ceea ce se numește mono-repo: un depozit care are mai mult de un proiect în interiorul și ar putea partaja dependențe.

de doppelmutzi din doppelmutzi.github.io:

astfel de proiecte se numesc spații de lucru sau pachete. În schimb, utilizarea mai multor depozite cu fiecare depozit care găzduiește un singur proiect se numește abordare Multi-Repo.

un lucru care m-a uimit cu abordarea mono-repo a fost că pachetele/spațiile mele de lucru pot partaja local aceleași dependențe node_modules. Acest lucru îmi economisește timp și spațiu fizic.

spațiile de lucru lerna și fire ne oferă posibilitatea de a construi biblioteci și aplicații într-un singur repo fără a ne obliga să publicăm în npm sau în alte registre. Frumusețea din spatele acestor tehnologii este că pot găsi dependențe de pachete analizând pachetul.fișiere JSON situate în folderul rădăcină al fiecărui proiect. Astfel, aceste instrumente fac învechită crearea manuală a simbolurilor sau utilizarea directă a legăturii npm „de nivel scăzut”.

acum, chiar dacă utilizați deja yarn workspaces cred că Lerna merită încercarea, deoarece oferă o serie de avantaje. În afară de ai putea folosi Lerna cu spații de lucru Fire:

cu o singură comandă lerna puteți itera prin toate sau anumite pachete, rulând o serie de operații (cum ar fi linting, testare și construire) pe fiecare pachet. Astfel, complimentează spațiile de lucru ale firelor care preiau procesul de gestionare a dependenței.

Deci, în cele din urmă am decis să învăț Lerna – îmi pare rău pentru răsucirea limbii – dar nu am vrut să trec la fire (din moment ce sunt doar confortabil cu npm). Iată cum am reușit să fac să funcționeze:

setarea Lerna cu NPM din shell

creați un director pentru proiectul dvs. și introduceți – l cu această comandă:

mkdir try-lernacd try-lerna

puteți instala Lerna la nivel global (npm i -g lerna) sau să-l utilizați cu npx.

  • Init lerna

    npx lerna init --independent

acest lucru va:

  • init un depozit git
  • creați un package.json
  • creați un lerna.json
  • creați un folder packages (aici puteți plasa spațiile de lucru).

pachete este modul în care Lerna apel spații de lucru.

puteți aranja pachetele după cum doriți, dacă preferați, puteți pune toate pachetele în folderul rădăcină și apoi puteți schimba matricea pentru a se potrivi (ca o abordare „spații de lucru fire”).

lerna mea.fișierul json are stream: true (pentru a vedea ieșirea gatsby când se execută dezvoltarea cu lerna) și hoist: true (pentru a ridica node_modules, de asemenea, cu comanda lerna add ;voi explica această ultimă caracteristică înainte):

{ "packages":, "version":"independent", "stream":true, "command":{ "bootstrap":{ "hoist":true } }}

puteți adăuga acest manual sau puteți utiliza această comandă simplă shell:

echo "{\r\t\"packages\":,\r\t\"version\":\"independent\",\r\t\"stream\":true,\r\t\"command\":{\r\t\t\"bootstrap\":{\r\t\t\t\"hoist\":true\r\t\t}\r\t}\r}" > lerna.json 

schele foldere și fișiere cu coajă

această secțiune se poate face manual urmând prima lecție din cursul lui Jason Lengstorf legat în introducere.
eu doar colectez toate pasajele de bază pentru a le realiza cu câteva comenzi din coajă.
în cazul în care doriți să utilizați abordarea mea, nu uitați să înlocuiți „nume” cu numele temei dvs. și apoi copiați și lipiți aceste comenzi:

mkdir -p packages/{gatsby-theme-NAME,site}
touch packages/{gatsby-theme-NAME,site}/{index.js,package.json}
echo "//loop" >> packages/{gatsby-theme-NAME,site}/index.js

conținutul inițial pentru pachet.json în dosarul site-ului:

echo "{\r\t\"private\":true,\r\t\"name\":\"site\",\r\t\"version\":\"1.0.0\",\r\t\"license\":\"MIT\",\r\t\"scripts\":{\r\t\t\"builds\":\"gatsby build\",\r\t\t\"develop\":\"gatsby develop\",\r\t\t\"clean\":\"gaysby clean\"\r\t}\r}" >> packages/site/package.json 

pachet.json pe tema folderului (înlocuiți din nou numele și introduceți și YOUR_NPM_USER):

echo "{\r\t\"name\": \"@YOUR_NPM_USER/gatsby-theme-NAME\",\r\t\"version\": \"1.0.1\",\r\t\"license\": \"MIT\",\r\t\"main\": \"index.js\",\r\t\"scripts\": {\r\t\t\"builds\": \"gatsby build\",\r\t\t\"develop\": \"gatsby develop\",\r\t\t\"clean\": \"gaysby clean\"\r\t}\r}" >> packages/gatsby-theme-NAME/package.json 

iată rezultatul:

├── packages│ ├── site│ └── gatsby-theme-NAME├── .gitignore├── package.json└── lerna.json

PS: vă sfătuiesc să creați un .gitignore și să adăugați node_modules imediat:

echo "node_modules" > .gitignore

folosind Lerna

o problemă cu Lerna este că nu puteți instala mai multe dependențe pe pachet cu o singură comandă (așa cum faceți cu yarn workspace name_workspace add package1 package2 etc). Trebuie să o faceți unul câte unul, așa (dacă nu ați instalat-o la nivel global, va trebui să precedeți fiecare comandă cu npx):

lerna add gatsby --scope site 
lerna add react --scope site
lerna add react-dom --scope site

aici --scope site este folosit pentru a spune Lerna pentru a instala numai în pachetul”site”.

cu toate acestea, puteți instala o dependență, să spunem gatsby, pentru fiecare pachet cu o singură comandă:

lerna add gatsby

această comandă va:

  • instalați Gatsby pentru fiecare pachet (deci în acest caz pentru Site și, de asemenea, pentru pachetul tematic).
  • dacă ați activat hoist pe lerna.json se va crea un folder node_modules în rădăcină (a se vedea ‘Lerna Bootstrap forward’):

alegeți abordarea

dacă vă place această abordare, puteți continua să instalați toate dependențele comune (react, react-dom) pe pachete. Dacă trebuie să instalați unele dependențe numai pentru un singur pachet, utilizați --scope name_of_the_package (amintiți-vă că este numele specificat pe pachet.json nu numele folderului).

de asemenea, puteți utiliza npm instalând fiecare dependență dorită în pachetul respectiv. Dar amintiți-vă că această abordare va instala o dependențe node_modules pentru fiecare folder respectiv. Acest lucru ar putea fi curat și apoi arborat după aceea. Deși această opțiune este valabilă, vă va lua mai mult timp.

indiferent de opțiunea pe care o alegeți, nu uitați să adăugați / să conectați pachetul tematic local ca dependență pentru pachetul Site (utilizați numele pe care l-ați setat package.json):

lerna add @YOUR_NPM_USER/gatsby-theme-NAME --scope=site

orchestrați totul cu Lerna bootstrap

în cele din urmă puteți face în siguranță:

lerna bootstrap 

această comandă este foarte utilă, mai ales dacă aveți deja pachetul.json umplut cu dependențele lor respective.

cu opțiunea hoist: true (pe lerna.json) va plasa un folder partajat node_modulessituat în rădăcină, apoi va lega dependențele locale în package.json respective.

îmi place foarte mult –caracteristică de ridicare este un proces care evită dependențele duplicate de node_modules, astfel încât economisește spațiu fizic și timp de instalare.

dacă pentru orice motiv doriți să curățați ceva mai întâi ai putea face:

lerna clean && lerna link && lerna bootstrap 

comenzi Run și script-uri

pentru a rula script-uri (plasate pe package.json) trebuie să specificați (sau nu) Pachetul țintă:

lerna run develop --scope Package_name

Lerna, de asemenea, vă permit să rulați orice comenzi de la rădăcină la fiecare pachet (utilizați dash). De exemplu:

lerna exec -- rm -rf node_modules 

aceasta va elimina modulele de noduri din fiecare folder de pachete.

Update Wizard

în viitor, când va trebui să Actualizați pachetele, puteți utiliza update-wizard:

npm install --save-dev lerna-update-wizard

apoi, va trebui să rulați numai această comandă și expertul vă va ajuta:

lernaupdate