lär dig hur du ställer in ett Gatsby-temaprojekt med Lerna: den här guiden hjälper dig att förstå vad som är en mono-repo och hur du hanterar det med Lerna med NPM istället för Garnarbetsplatser.

Index

  • Vad är Lerna och varför är det värt ett försök?
  • ställa in Lerna med NPM från skalet
  • Ställningsmappar och filer med skal
  • använda Lerna
    • Välj din inställning
  • orkestrera allt med Lerna bootstrap
  • kör kommandon och skript
  • uppdateringsguiden

Vad är Lerna och varför är det värt ett försök?

jag började följa Gatsby tema Författarkurs från Jason Lengstorf (@jlengstorf) och insåg snart att jag inte vet något om ’garn arbetsytor’. Det är ett vackert sätt att hantera vad som kallas en mono-repo: ett arkiv som har mer än ett projekt inuti och kan dela beroenden.

av doppelmutzi från doppelmutzi.github.io:

sådana projekt kallas arbetsytor eller paket. Däremot kallas användning av flera repositorier med varje repository som bara innehåller ett projekt en Multi-Repo-strategi.

en sak som förvånade mig med mono-repo-metoden var att mina paket/arbetsytor lokalt kan dela samma node_modules beroenden. Detta sparar mig tid och fysiskt utrymme.

lerna och garnarbetsplatser ger oss möjlighet att bygga bibliotek och appar i en enda repo utan att tvinga oss att publicera till npm eller andra register. Skönheten bakom dessa tekniker är att de kan hitta paketberoenden genom att analysera paket.json-filer som finns i varje projekts rotmapp. Därmed gör dessa verktyg det föråldrat att manuellt skapa symboliska länkar eller använda ”lågnivå” npm-länk direkt.

nu, även om du redan använder yarn workspaces tycker jag att Lerna är värda försöket eftersom det ger en serie vantages. Förutom att du kan använda Lerna med garn arbetsytor:

med ett lerna-kommando kan du iterera genom alla eller vissa paket och köra en serie operationer (som linting, testning och byggnad) på varje paket. Därmed komplimangerar det garnarbetsplatser som tar över beroendehanteringsprocessen.

så äntligen bestämde jag mig för att lära mig Lerna – ledsen för tungvridaren – men jag ville inte byta till garn (eftersom jag bara är bekväm med npm). Så här lyckades jag få det att fungera:

ställa in Lerna med NPM från skalet

skapa en katalog för ditt projekt och ange det med det här kommandot:

mkdir try-lernacd try-lerna

du kan installera Lerna globalt (npm i -g lerna) eller använda den med npx.

  • Init lerna

    npx lerna init --independent

detta kommer att:

  • init ett Git-arkiv
  • skapa en package.json
  • skapa en lerna.json
  • skapa en packages mapp (här kan du placera dina arbetsytor).

paket är hur lerna kallar arbetsytor.

du kan ordna paketen som du vill, om du föredrar kan du lägga alla paket i rotmappen och sedan ändra matrisen för att matcha (som en ”garn arbetsytor” tillvägagångssätt).

min lerna.json-filen har stream: true (för att se gatsby-utmatningen när den körs utvecklas med lerna) och hoist: true (för att hissa node_modules också med kommandot lerna add ;jag förklarar den här sista funktionen framåt):

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

du kan lägga till detta manuellt eller använda det här enkla skalkommandot:

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 

Ställningsmappar och filer med skal

detta avsnitt kan göras för hand efter den första lektionen från Jason Lengstorfs kurs länkad i introduktionen.
jag samlar bara alla grundläggande passager för att uppnå dem med få kommandon från skalet.
om du vill använda min metod kom ihåg att ersätta ”namn” med namnet på ditt tema och sedan bara kopiera och klistra in dessa kommandon:

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

ursprungligt innehåll för paket.json på platsmappen:

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 

paket.json på mapptemat (Byt namn igen och sätt också in 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 

här är resultatet:

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

PS: Jag råder dig att skapa en .gitignore och lägga till node_modules direkt:

echo "node_modules" > .gitignore

använda Lerna

ett problem med Lerna är att du inte kan installera flera beroenden per paket med ett enda kommando (som du gör med yarn workspace name_workspace add package1 package2 etc). Du måste göra det en efter en, så här (om du inte installerade det globalt måste du föregå varje kommando med npx):

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

här används --scope site för att berätta för Lerna att installera endast i paketet ”site”.

du kan dock installera ett beroende, låt oss säga gatsby , för varje paket med bara ett kommando:

lerna add gatsby

detta kommando kommer att:

  • installera Gatsby för varje paket (så i det här fallet för Webbplatsen och även för temapaketet).
  • om du har aktiverat hoist på lerna.json det kommer att skapa en node_modules mapp i din rot (se ’Lerna Bootstrap forward’):

Välj ditt tillvägagångssätt

om du gillar det här tillvägagångssättet kan du fortsätta installera alla vanliga beroenden (react, react-dom) på paketen. Om du behöver installera vissa beroenden endast för ett paket Använd --scope name_of_the_package (kom ihåg att det är namnet som anges på paketet.json inte namnet på mappen).

du kan också använda npm genom att installera varje beroende du vill ha i respektive paket. Men kom ihåg detta tillvägagångssätt kommer att installera en node_modules beroenden för varje respektive mapp. Detta kan vara rent och sedan hissas efteråt. Även om det här alternativet är giltigt tar det dig mer tid.

oavsett vilket alternativ du väljer, kom ihåg att lägga till / länka det lokala temapaketet som ett beroende för Webbplatspaketet (använd namnet du angav på package.json):

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

orkestrera allt med Lerna bootstrap

i slutändan kan du säkert göra:

lerna bootstrap 

det här kommandot är verkligen användbart, speciellt om du redan har ditt paket.json fylld med sina respektive beroenden.

med hoist: true alternativ (på lerna.json) kommer det att placera en delad node_modulesmapp som finns i roten, då kommer den att länka lokala beroenden i respektive package.json.

jag gillar verkligen –hoist-Funktionen Det är en process som undviker duplicerade beroenden på node_modules, så det sparar fysiskt utrymme och installationstid.

om du av någon anledning vill rengöra någonting först kan du göra:

lerna clean && lerna link && lerna bootstrap 

kör kommandon och skript

för att köra skript (placeras på package.json) måste du ange (eller inte) Målpaketet:

lerna run develop --scope Package_name

Lerna låter dig också köra några kommandon från roten till varje paket (Använd streck). Till exempel:

lerna exec -- rm -rf node_modules 

detta tar bort nodmoduler på varje Paketmapp.

uppdateringsguiden

i framtiden, när du behöver uppdatera dina paket kan du använda uppdateringsguiden:

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

då behöver du bara köra det här kommandot och guiden hjälper dig:

lernaupdate