zou moeten proberen leer hoe je een Gatsby Themaproject kunt opzetten met Lerna: deze handleiding zal je helpen begrijpen wat een mono-repo is en hoe je het kunt beheren met Lerna met behulp van NPM in plaats van Yarn Workspaces.

Index

  • Wat is Lerna en waarom is het proberen waard?
  • Lerna instellen met NPM uit de shell
  • Steigermappen en bestanden met shell
  • Lerna
    • Kies uw aanpak
  • orkestreer alles met Lerna bootstrap
  • commando ‘ s en scripts
  • Update Wizard

Wat is Lerna en waarom het de moeite waard is om te proberen?

ik begon de Gatsby Theme Authoring course van Jason Lengstorf (@jlengstorf) te volgen en besefte al snel dat ik niets weet over ‘Yarn Workspaces’. Het is een mooie manier om een mono-repo te beheren.: een repository die meer dan één project binnen heeft en afhankelijkheden kan delen.

door doppelmutzi uit doppelmutzi.github.io:

dergelijke projecten worden werkruimten of pakketten genoemd. In tegenstelling, het gebruik van meerdere repositories met elke repository behuizing Slechts één project wordt een Multi-Repo aanpak genoemd.

een ding dat me verbaasde met de mono-repo aanpak was dat mijn pakketten / werkruimten lokaal dezelfde node_modules afhankelijkheden kunnen delen. Dit bespaart me tijd en fysieke ruimte.

lerna en yarn workspaces geven ons de mogelijkheid om bibliotheken en apps in één repo te bouwen zonder ons te dwingen om te publiceren naar npm of andere registers. Het mooie achter deze technologieën is dat ze pakketafhankelijkheden kunnen vinden door pakket te analyseren.json-bestanden in de hoofdmap van elk project. Hierdoor maken deze tools het overbodig om handmatig symlinks te maken of direct een “low-level” NPM-koppeling te gebruiken.

nu, zelfs als u al yarn workspaces gebruikt, denk ik dat Lerna het proberen waard is omdat het een reeks vantages biedt. Naast je kon Lerna gebruiken met garen werkbladen:

met één lerna commando kun je door alle of bepaalde pakketten heen itereren, waarbij je een reeks bewerkingen uitvoert (zoals linten, testen en bouwen) op elk pakket. Daardoor, het compliment garen werkruimten die neemt de afhankelijkheid management proces.

dus uiteindelijk heb ik besloten om Lerna te leren-sorry voor de tong twister – maar ik wilde niet overschakelen naar garen (omdat ik ben gewoon comfortabel met npm). Hier is hoe ik erin geslaagd om het te laten werken:

Lerna instellen met NPM uit de shell

Maak een map aan voor uw project en voer het in met dit commando:

mkdir try-lernacd try-lerna

u kunt Lerna globaal installeren (npm i -g lerna) of gebruiken met npx.

  • Init lerna

    npx lerna init --independent

dit zal:

  • init een git repository
  • Maak een package.json
  • Maak een lerna.json
  • Maak een packages map (hier kunt u uw werkbladen plaatsen).

Packages is hoe lerna werkruimtes aanroept.

u kunt de pakketten rangschikken zoals u wilt, als u dat wilt kunt u alle pakketten in de hoofdmap plaatsen en dan de array wijzigen om overeen te komen (zoals een “yarn workspaces” aanpak).

My lerna.json-bestand heeft stream: true (om gatsby-uitvoer te zien bij het uitvoeren van develop met lerna) en hoist: true (om node_modules ook met het commando lerna add te hijsen; Ik zal deze laatste functie doorsturen uitleggen):

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

u kunt dit handmatig toevoegen of deze eenvoudige shell-opdracht gebruiken:

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

Steigermappen en bestanden met shell

deze sectie kan met de hand worden gedaan na de eerste les van Jason Lengstorf ‘ s cursus die in de inleiding is gelinkt.
ik verzamel gewoon alle basispassages om ze met een paar commando ‘ s uit de shell te volbrengen.
als u mijn aanpak wilt gebruiken, vergeet dan niet om “NAME” te vervangen door de naam van uw thema en kopieer en plak deze commando ‘ s:

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

initiële inhoud voor pakket.json in de sitemap:

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

pakje.json op het mapthema (vervang de naam opnieuw en plaats ook UW_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

hier is het resultaat:

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

PS: Ik adviseer u om een .gitignore aan te maken en meteen node_modules toe te voegen:

echo "node_modules" > .gitignore

Lerna

een probleem met Lerna is dat je niet meerdere afhankelijkheden per pakket kunt installeren met één enkel commando (zoals je doet met yarn workspace name_workspace add package1 package2 etc). Je moet het één voor één doen, zoals dit (als je het niet globaal hebt geà nstalleerd moet je elk commando met npxvoorafgaan):

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

hier wordt --scope site gebruikt om Lerna te vertellen alleen in het pakket “site”te installeren.

u kunt echter een afhankelijkheid installeren, laten we zeggen gatsby, voor elk pakket met slechts één commando:

lerna add gatsby

dit commando zal:

  • installeer Gatsby voor elk pakket (dus in dit geval voor de Site en ook voor het themapakket).
  • Als u hoist hebt ingeschakeld op lerna.json het zal een map node_modules aanmaken in je root (zie ‘Lerna Bootstrap forward’):

Kies uw aanpak

Als u deze aanpak leuk vindt, kunt u doorgaan met het installeren van alle veelvoorkomende afhankelijkheden (react, react-dom) op de pakketten. Als u slechts enkele afhankelijkheden voor één pakket wilt installeren, gebruik dan --scope name_of_the_package (onthoud dat dit de naam is die op het pakket is opgegeven.json niet de naam van de map).

u kunt ook npm gebruiken door elke gewenste afhankelijkheid in het betreffende pakket te installeren. Maar vergeet niet dat deze aanpak zal een node_modules afhankelijkheden installeren voor elke respectievelijke map. Dit kan schoon zijn en daarna gehesen worden. Hoewel deze optie geldig is, zal het u meer tijd kosten.

welke optie u ook kiest vergeet niet om het lokale themapakket toe te voegen/te koppelen als een afhankelijkheid voor het Sitepakket (gebruik de naam die u hebt ingesteld op package.json):

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

orkestreer alles met Lerna bootstrap

uiteindelijk kun je veilig doen: 

lerna bootstrap

dit commando is erg handig, vooral als je je pakket al hebt.json gevuld met hun respectieve afhankelijkheden.

met hoist: true optie (op lerna.json) zal het een gedeelde node_modules map in de root plaatsen, daarna zal het lokale afhankelijkheden koppelen in hun respectievelijke package.json.

I really like –hoist feature Het is een proces dat dubbele afhankelijkheden op de node_modules voorkomt, dus het bespaart fysieke ruimte en installatietijd.

Als u om welke reden dan ook eerst iets wilt opschonen, kunt u dit doen:

lerna clean && lerna link && lerna bootstrap

commando ‘ s en scripts uitvoeren

om scripts uit te voeren (geplaatst op de package.json) moet u het Doelpakket opgeven (of niet) :

lerna run develop --scope Package_name

Lerna laat je ook commando ‘ s uitvoeren vanaf de root naar elk pakket (gebruik dash). Bijvoorbeeld::

lerna exec -- rm -rf node_modules

dit verwijdert knooppuntmodules op elke pakketmap.

Wizard bijwerken

in de toekomst, wanneer u uw pakketten moet bijwerken, kunt u de wizard bijwerken gebruiken:

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

dan moet u alleen deze opdracht uitvoeren en de wizard zal u helpen: 

lernaupdate