Lær, hvordan du opretter et Gatsby-Temaprojekt med Lerna: denne vejledning hjælper dig med at forstå, hvad der er en mono-repo, og hvordan du administrerer det med Lerna ved hjælp af NPM i stedet for Garnarbejdsområder.

indeks

  • Hvad er Lerna, og hvorfor er det værd at prøve?
  • Indstilling af Lerna med NPM fra skallen
  • Stilladsmapper og filer med skal
  • brug af Lerna
    • vælg din tilgang
  • orkestrer alt med Lerna bootstrap
  • Kør kommandoer og scripts
  • Opdateringsguiden

Hvad er Lerna, og hvorfor er det værd at prøve?

jeg begyndte at følge Gatsby-Temaforfatterkurset fra Jason Lengstorf (@jlengstorf) og indså snart, at jeg ikke ved noget om ‘Garnarbejdsområder’. Det er en smuk måde at styre, hvad der kaldes en mono-repo: et lager, der har mere end et projekt inde og kunne dele afhængigheder.

af doppelmutsi fra doppelmutzi.github.io:

sådanne projekter kaldes arbejdsområder eller pakker. I modsætning hertil kaldes kun et projekt ved hjælp af flere repositorier med hvert depothus en Multi-Repo-tilgang.

en ting, der overraskede mig med mono-repo-tilgangen, var, at mine pakker/arbejdsområder lokalt kan dele de samme node_modules afhængigheder. Det sparer tid og fysisk plads.

Lerna og yarn arbejdsområder giver os mulighed for at opbygge biblioteker og apps i en enkelt repo uden at tvinge os til at offentliggøre til npm eller andre registre. Skønheden bag disse teknologier er, at de kan finde pakkeafhængigheder ved at analysere pakken.JSON filer placeret på hvert projekt rodmappe. Derved gør disse værktøjer det forældet at manuelt oprette symlinks eller bruge “lavt niveau” npm link direkte.

nu, selvom du allerede bruger yarn workspaces jeg tror Lerna værd at prøve, fordi det giver en række vantages. Udover du kunne bruge Lerna med garn arbejdsområder:

med en Lerna-kommando kan du gentage gennem alle eller bestemte pakker og køre en række operationer (såsom linting, test og bygning) på hver pakke. Derved komplimenterer det garnarbejdsområder, der overtager afhængighedsstyringsprocessen.

så endelig besluttede jeg at lære Lerna – undskyld for tungevrideren – men jeg ville ikke skifte til garn (da jeg bare er komfortabel med npm). Sådan lykkedes det mig at få det til at fungere:

Indstilling af Lerna med NPM fra skallen

Opret en mappe til dit projekt og indtast det med denne kommando:

mkdir try-lernacd try-lerna

du kan installere Lerna globalt (npm i -g lerna) eller bruge det med NPK.

  • Init lerna

    npx lerna init --independent

dette vil:

  • init et git-arkiv
  • Opret en package.json
  • Opret en lerna.json
  • Opret en packages mappe (her kan du placere dine arbejdsområder).

pakker er, hvordan lerna kalder arbejdsområder.

du kan arrangere pakkerne, som du vil, hvis du foretrækker det, kan du lægge alle pakkerne i rodmappen og derefter ændre arrayet for at matche (som en “garnarbejdsområder” tilgang).

min lerna.JSON fil har stream: true (for at se gatsby output, når køre udvikle med lerna) og hoist: true (for at hejse node_modules også med kommandoen lerna add ;jeg vil forklare denne sidste funktion frem):

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

du kan tilføje dette manuelt eller bruge denne enkle shell-kommando:

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 

Stilladsmapper og filer med skal

dette afsnit kan udføres manuelt efter den første lektion fra Jason Lengstorf ‘ s kursus, der er knyttet til introduktionen.
jeg samler bare alle de grundlæggende passager for at udføre dem med få kommandoer fra skallen.
hvis du vil bruge min tilgang, skal du huske at erstatte “navn” med navnet på dit tema og derefter bare kopiere og indsætte disse kommandoer:

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

indledende indhold til pakken.json på mappen site:

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 

pakke.json på mappen Tema (erstatte navn igen og også indsætte 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 

her er resultatet:

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

PS: Jeg råder dig til at oprette en .gitignore og tilføje node_modules med det samme:

echo "node_modules" > .gitignore

brug af Lerna

et problem med Lerna er, at du ikke kan installere flere afhængigheder pr.pakke med en enkelt kommando (som du gør med yarn workspace name_workspace add package1 package2 etc). Du skal gøre det en efter en, sådan her (hvis du ikke installerede det globalt, skal du gå forud for hver kommando med npx):

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

her --scope site bruges til at fortælle Lerna at installere kun i pakken”site”.

du kan dog installere en afhængighed, lad os sige gatsby, for hver pakke med kun en kommando:

lerna add gatsby

denne kommando vil:

  • installer Gatsby for hver pakke (så i dette tilfælde for Site og også for temapakken).
  • hvis du aktiverede hoist på lerna.json det vil skabe en node_modules mappe i din rod (se ‘Lerna Bootstrap fremad’):

vælg din tilgang

hvis du kan lide denne tilgang, kan du fortsætte med at installere alle de fælles afhængigheder (react, react-dom) på pakkerne. Hvis du kun skal installere nogle afhængigheder for en pakke brug --scope name_of_the_package (husk det er navnet angivet på pakken.json ikke navnet på mappen).

du kan også bruge npm ved at installere hver afhængighed, du ønsker i den respektive pakke. Men husk denne fremgangsmåde vil installere en node_modules afhængigheder for hver respektive mappe. Dette kunne være rent og derefter hejst bagefter. Selvom denne mulighed er gyldig, vil det tage dig mere tid.

uanset hvilken indstilling du vælger, husk at tilføje / linke den lokale temapakke som en afhængighed af Sidepakken (brug det navn, du angiver package.json):

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

orkestrere alt med Lerna bootstrap

i sidste ende kan du sikkert gøre:

lerna bootstrap 

denne kommando er virkelig nyttig, specielt hvis du allerede har din pakke.json fyldt med deres respektive afhængigheder.

med hoist: true mulighed (på lerna.json) vil den placere en delt node_modulesmappe placeret i roden, så vil den forbinde lokale afhængigheder i deres respektive package.json.

jeg kan virkelig godt lide –hoist-funktion det er en proces, der undgår duplikerede afhængigheder på node_modulerne, så det sparer fysisk plads og installationstid.

hvis du af en eller anden grund vil rense noget først, kan du gøre:

lerna clean && lerna link && lerna bootstrap 

Kør kommandoer og scripts

for at køre scripts (placeret på package.json) skal du angive (eller ikke) målpakken:

lerna run develop --scope Package_name

Lerna også lade dig køre nogen kommandoer fra roden til hver pakke (brug dash). For eksempel:

lerna exec -- rm -rf node_modules 

dette vil fjerne node moduler på hver pakke mappe.

Opdateringsguiden

i fremtiden, når du skal opdatere dine pakker, kan du bruge opdateringsguiden:

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

derefter skal du kun køre denne kommando, og guiden hjælper dig:

lernaupdate