Lær hvordan du setter Opp En Gatsby Tema Prosjekt Med Lerna: denne guiden vil hjelpe deg å forstå hva som er en mono-repo og hvordan du klarer Det Med Lerna bruker NPM i stedet For Garn Arbeidsområder.

Index

  • Hva Er Lerna og hvorfor det er verdt et forsøk?
  • Sette Lerna MED NPM fra skallet
  • Stillasmapper og filer med skall
  • Bruke Lerna
    • Velg din tilnærming
  • Orkestrere alt med Lerna bootstrap
  • Kjør kommandoer og skript
  • Update Wizard

Hva Er Lerna og hvorfor det er verdt et forsøk?

jeg begynte å følge Gatsby Tema Forfatterkurs Fra Jason Lengstorf (@jlengstorf) og innså snart at jeg ikke vet noe om ‘Garn Arbeidsområder’. Det er en fin måte å håndtere det som kalles en mono-repo: et depot som har mer enn ett prosjekt inne og kan dele avhengigheter.

av doppelmutzi fra doppelmutzi.github.io:

slike prosjekter kalles arbeidsområder eller pakker. I motsetning til dette, ved å bruke flere repositorier med hvert depothus, kalles bare ett prosjekt En Multi-Repo-tilnærming.

En ting som overrasket meg med mono-repo-tilnærmingen var at Mine Pakker / Arbeidsområder lokalt kan dele de samme node_modules avhengighetene. Dette sparer meg for tid og fysisk plass.

lerna og yarn-arbeidsområder gir oss muligheten til å bygge biblioteker og apper i en enkelt repo uten å tvinge oss til å publisere til npm eller andre registre. Skjønnheten bak disse teknologiene er at de kan finne pakkeavhengigheter ved å analysere pakken.json filer som ligger på hvert prosjekt rotmappe. Dermed gjør disse verktøyene det foreldet å manuelt opprette symlinker eller bruke» low-level » npm link direkte.

Nå, Selv om du allerede bruker yarn workspaces tror Jeg Lerna verdt forsøket fordi det gir en rekke vantages. Dessuten kan Du bruke Lerna Med Garn Arbeidsområder:

med en lerna-kommando kan du iterere gjennom alle eller bestemte pakker, og kjøre en rekke operasjoner (for eksempel linting, testing og bygging) på hver pakke. Dermed komplimenterer det garn arbeidsområder som tar over avhengighetshåndteringsprosessen.

så endelig bestemte jeg Meg for å lære Lerna-beklager tunge twister-men jeg ville ikke bytte Til Garn (siden jeg bare er komfortabel med npm). Slik klarte jeg å få det til å fungere:

Sette Lerna MED NPM fra skallet

Opprett en katalog for prosjektet ditt og skriv inn det med denne kommandoen:

mkdir try-lernacd try-lerna

Du kan installere lerna globalt (npm i -g lerna) eller bruke Den med npx.

  • Init lerna

    npx lerna init --independent

Dette vil:

  • init et git repository
  • opprett en package.json
  • opprett en lerna.json
  • opprett en packages mappe (her kan du plassere arbeidsområdene dine).

Pakker er hvordan lerna kaller arbeidsområder.

Du kan ordne Pakkene som du vil, hvis du foretrekker kan du sette alle pakkene i rotmappen og deretter endre matrisen for å matche (som en «garn arbeidsområder» tilnærming).

Min lerna.json-filen har stream: true (for å se gatsby-utgang når du kjører utvikle med lerna) og hoist: true (for å heise node_modules også med kommandoen lerna add; jeg skal forklare denne siste funksjonen fremover):

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

du kan legge til dette manuelt eller bruke denne enkle shell-kommandoen:

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 

Stillasmapper og filer med shell

denne delen kan gjøres for hånd etter Den første leksjonen Fra Jason Lengstorfs kurs knyttet i introduksjonen.
jeg samler bare alle de grunnleggende passasjer for å oppnå dem med få kommandoer fra skallet.
hvis du vil bruke min tilnærming, husk å erstatte «NAVN» med navnet på temaet ditt, og kopier og lim inn disse kommandoene:

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

Innledende innhold for pakken.json på nettstedet mappen:

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å mappetemaet (erstatt NAVN igjen og sett OGSÅ INN 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 anbefaler deg å lage en .gitignore og legge til node_modules med en gang:

echo "node_modules" > .gitignore

Bruke Lerna

Et problem Med Lerna er at du ikke kan installere flere avhengigheter per Pakke med en enkelt kommando(som du gjør med yarn workspace name_workspace add package1 package2 etc). Du må gjøre det en etter en, slik som dette (hvis du ikke installerte det globalt, må du gå foran hver kommando med npx):

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

Her --scope site brukes til å fortelle Lerna å installere bare I Pakken «site».

du kan imidlertid installere en avhengighet, la oss si gatsby, for hver Pakke med bare en kommando:

lerna add gatsby

denne kommandoen vil:

  • Installer Gatsby for hver Pakke (så i dette tilfellet For Området og også For Temaet Pakken).
  • hvis du aktiverte hoist på lerna.json det vil skape en node_modules mappe i roten din (se ‘Lerna Bootstrap forward’):

Velg din tilnærming

hvis du liker denne tilnærmingen, kan du fortsette å installere alle vanlige avhengigheter (react, react-dom) På Pakkene. Hvis du trenger å installere noen avhengigheter bare for En Pakke bruk --scope name_of_the_package (husk det er navnet som er angitt på pakken.json ikke navnet på mappen).

du kan også bruke npm ved å installere hver avhengighet du vil ha i den respektive Pakken. Men husk denne tilnærmingen vil installere en node_modules avhengigheter for hver respektive mappe. Dette kan være rent og deretter heises etterpå. Selv om dette alternativet er gyldig, vil det ta deg mer tid.

uansett hvilket alternativ du velger husk å legge til / koble lokale Tema Pakken som en avhengighet For Området Pakken (bruk navnet du angir på package.json):

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

Orkestrere alt med Lerna bootstrap

Til slutt kan du trygt gjøre:

lerna bootstrap 

denne kommandoen er veldig nyttig, spesielt hvis du allerede har pakken din.json fylt med sine respektive avhengigheter.

med hoist: true alternativ (på lerna.json) vil den plassere en delt node_modules mappe i roten, så vil den koble lokale avhengigheter i deres respektive package.json.

jeg liker virkelig-hoist feature det er en prosess som unngår dupliserte avhengigheter på node_modules, slik at det sparer fysisk plass og installasjonstid.

hvis du av en eller annen grunn vil rense noe først, kan du gjøre:

lerna clean && lerna link && lerna bootstrap 

Kjør kommandoer og skript

for å kjøre skript (plassert på package.json) må du angi (eller ikke) målpakken:

lerna run develop --scope Package_name

Lerna lar deg også kjøre noen kommandoer fra roten til hver Pakke (bruk dash). For eksempel:

lerna exec -- rm -rf node_modules 

Dette vil fjerne nodemoduler på hver Pakkemappe.

Oppdateringsveiviser

i fremtiden, når du må oppdatere pakkene dine, kan du bruke oppdateringsveiviseren:

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

da må du bare kjøre denne kommandoen, og veiviseren hjelper deg:

lernaupdate