Naučte se, jak nastavit motivový Projekt Gatsby s Lernou: tato příručka vám pomůže pochopit, co je mono-repo a jak jej spravovat s Lernou pomocí NPM místo pracovních prostorů příze.

Index

  • co je Lerna a proč stojí za to vyzkoušet?
  • nastavení Lerny s NPM z shellu
  • lešení složky a soubory s shellem
  • pomocí Lerny
    • Vyberte si svůj přístup
  • organizujte vše pomocí Lerna bootstrap
  • spusťte příkazy a skripty
  • Průvodce aktualizací

co je Lerna a proč stojí za to vyzkoušet?

začal jsem sledovat Gatsby téma Authoring kurz od Jason Lengstorf (@jlengstorf) a brzy si uvědomil, že nevím nic o ‚příze pracovních prostorů‘. Je to pěkný způsob, jak spravovat to, co se nazývá mono-repo: úložiště, které má více než jeden projekt uvnitř a může sdílet závislosti.

od doppelmutzi z doppelmutzi.github.io:

takové projekty se nazývají pracovní prostory nebo balíčky. Naproti tomu použití více úložišť s každým úložištěm, kde je umístěn pouze jeden projekt, se nazývá přístup Multi-Repo.

jedna věc, která mě ohromila přístupem mono-repo, bylo to, že moje balíčky / pracovní prostory mohou lokálně sdílet stejné závislosti node_modules. To mi šetří čas a fyzický prostor.

pracovní prostory lerna a příze nám umožňují vytvářet knihovny a aplikace v jednom repo, aniž by nás nutily publikovat do npm nebo jiných registrů. Krása těchto technologií spočívá v tom, že mohou najít závislosti balíčků analýzou balíčku.json soubory umístěné v kořenové složce každého projektu. Díky těmto nástrojům je tedy zastaralé ručně vytvářet symlinky nebo přímo používat“ nízkoúrovňový “ odkaz npm.

nyní, i když již používáte yarn workspaces myslím, že Lerna stojí za to vyzkoušet, protože poskytuje řadu výhod. Kromě toho byste mohli použít Lerna s příze pracovních prostorů:

s jedním příkazem lerna můžete iterovat všechny nebo konkrétní balíčky a spouštět řadu operací (jako je linting, testování a budování) na každém balíčku. Tím doplňuje pracovní prostory příze, které přebírají proces správy závislostí.

nakonec jsem se tedy rozhodl naučit Lernu-Omlouvám se za jazykolam – ale nechtěl jsem přejít na přízi(protože jsem s npm spokojený). Zde je návod, jak se mi podařilo, aby to fungovalo:

nastavení Lerna s NPM z shellu

vytvořte adresář pro svůj projekt a zadejte jej tímto příkazem:

mkdir try-lernacd try-lerna

Lernu můžete nainstalovat globálně (npm i -g lerna) nebo ji použít s npx.

  • Init lerna

    npx lerna init --independent

to bude:

  • init repozitář git
  • vytvořte package.json
  • vytvořte lerna.json
  • vytvořte složku packages (zde můžete umístit pracovní prostory).

balíčky je, jak lerna volat pracovní prostory.

balíčky můžete uspořádat tak, jak chcete, pokud chcete, můžete všechny balíčky vložit do kořenové složky a poté změnit pole tak, aby odpovídalo (jako přístup „pracovní prostory příze“).

Moje lerna.json soubor má stream: true (aby bylo vidět Gatsby výstup při spuštění vyvíjet s lerna) a hoist: true (aby se zvedat node_modules také s příkazem lerna add; vysvětlím tuto poslední funkci dopředu):

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

můžete to přidat ručně nebo použít tento jednoduchý příkaz shellu:

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 

lešení složky a soubory s shell

tuto část lze provést ručně po první lekci z kurzu Jasona Lengstorfa Spojeného v úvodu.
jen sbírám všechny základní pasáže, abych je splnil několika příkazy z shellu.
v případě, že chcete použít můj přístup, nezapomeňte nahradit „NAME“ názvem vašeho motivu a poté zkopírujte a vložte tyto příkazy:

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

počáteční obsah pro balíček.json ve složce webu:

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 

balíček.json na téma složky (znovu nahraďte název a také vložte 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 

zde je výsledek:

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

PS: radím vám vytvořit .gitignore a přidat node_modules hned:

echo "node_modules" > .gitignore

pomocí Lerna

jeden problém s Lerna je, že nelze nainstalovat více závislostí na balíku s jedním jediným příkazem (jako vy s yarn workspace name_workspace add package1 package2 etc). Musíte to udělat jeden po druhém, jako je tento (Pokud jste jej nenainstalovali globálně, budete muset předcházet každému příkazu npx):

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

zde --scope site se používá k tomu, aby Lerna instalovala pouze do balíčku „site“.

nicméně, můžete nainstalovat závislost, řekněme gatsby, pro každý balíček pouze s jedním příkazem:

lerna add gatsby

tento příkaz bude:

  • nainstalujte Gatsby pro každý balíček (takže v tomto případě pro web a také pro balíček motivů).
  • pokud jste na lerně povolili hoist.json vytvoří složku node_modules v kořenovém adresáři (viz ‚Lerna Bootstrap forward‘):

zvolte svůj přístup

pokud se vám tento přístup líbí, můžete pokračovat v instalaci všech běžných závislostí (react, react-dom) na balíčky. Pokud potřebujete nainstalovat některé závislosti pouze pro jeden balíček, použijte --scope name_of_the_package (nezapomeňte, že je to název uvedený na balíčku.json není název složky).

můžete také použít npm instalací každé závislosti, kterou chcete, do příslušného balíčku. Nezapomeňte však, že tento přístup nainstaluje závislosti node_modules pro každou příslušnou složku. To by mohlo být čisté a poté zvednuto. I když je tato možnost platná, zabere vám to více času.

ať už zvolíte jakoukoli možnost, nezapomeňte přidat / propojit balíček místních motivů jako závislost pro balíček stránek (použijte název, který jste nastavili package.json):

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

zorganizujte vše pomocí Lerna bootstrap

nakonec můžete bezpečně udělat:

lerna bootstrap 

tento příkaz je opravdu užitečný, zvláště pokud již máte svůj balíček.json naplněn jejich příslušnými závislostmi.

s volbou hoist: true (na lerna.json) umístí sdílenou složku node_modules umístěnou v kořenovém adresáři a poté propojí místní závislosti v jejich příslušných package.json.

moc se mi líbí –hoist feature je to proces, který zabraňuje duplikovaným závislostem na node_modules, takže šetří fyzický prostor a čas instalace.

pokud z jakéhokoli důvodu chcete něco vyčistit jako první, můžete to udělat:

lerna clean && lerna link && lerna bootstrap 

spustit příkazy a skripty

Chcete-li spustit skripty (umístěné na package.json), musíte zadat (nebo ne) cílový balíček:

lerna run develop --scope Package_name

Lerna vám také umožňuje spouštět všechny příkazy z kořenového adresáře do každého balíčku(použijte pomlčku). Například:

lerna exec -- rm -rf node_modules 

tím se odstraní moduly uzlů v každé složce balíčku.

Průvodce aktualizací

v budoucnu, kdy budete potřebovat aktualizovat své balíčky, můžete použít Průvodce aktualizací:

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

pak budete muset spustit pouze tento příkaz a průvodce vám pomůže:

lernaupdate