Ismerje meg, hogyan kell beállítani a Gatsby téma projekt Lerna: ez az útmutató segít megérteni, mi az a mono-repo, és hogyan kell kezelni azt Lerna segítségével NPM helyett fonal munkaterületek.

Index

  • mi a Lerna és miért érdemes kipróbálni?
  • Beállítás Lerna NPM a shell
  • állvány mappák és fájlok shell
  • használata Lerna
    • válassza ki a megközelítés
  • vezényeljen mindent a Lerna bootstrap
  • parancsok és parancsfájlok futtatása
  • frissítés varázsló

mi a Lerna és miért érdemes kipróbálni?

elkezdtem követni Jason Lengstorf (@jlengstorf) Gatsby Témaszerző tanfolyamát, és hamar rájöttem, hogy semmit sem tudok a ‘fonal munkaterületekről’. Ez egy szép módja annak, hogy kezelje az úgynevezett mono-repo-t: olyan adattár, amely egynél több projektet tartalmaz, és megoszthatja a függőségeket.

által doppelmutzi tól től doppelmutzi.github.io:

az ilyen projekteket munkaterületeknek vagy csomagoknak nevezik. Ezzel szemben több adattár használatát minden olyan adattárral, amely csak egy projektet tartalmaz, Multi-Repo megközelítésnek nevezzük.

egy dolog, ami lenyűgözött a mono-repo megközelítéssel, az volt, hogy a Csomagjaim/Munkaterületeim lokálisan ugyanazokat a node_modules függőségeket oszthatják meg. Ez időt és fizikai teret takarít meg.

a lerna és a yarn munkaterületek lehetővé teszik számunkra, hogy könyvtárakat és alkalmazásokat építsünk egyetlen repóban anélkül, hogy arra kényszerítenénk, hogy közzétegyük az npm-ben vagy más nyilvántartásokban. Ezeknek a technológiáknak a szépsége az, hogy a csomagfüggőségeket a csomag elemzésével találják meg.az egyes projektek gyökérmappájában található json fájlok. Ezáltal ezek az eszközök elavulttá teszik a szimbolikus linkek kézi létrehozását vagy az “alacsony szintű” NPM link közvetlen használatát.

most, akkor is, ha már használja yarn workspaces azt hiszem, Lerna megéri a próbát, mert ez biztosítja egy sor vantages. Emellett használhatja Lerna fonal munkaterületek:

egy lerna paranccsal iterálhatja az összes vagy bizonyos csomagot, futtatva egy sor műveletet (például linting, tesztelés és építés) minden csomagon. Ezáltal kiegészíti a fonal munkaterületeit, amelyek átveszik a függőségkezelési folyamatot.

végül úgy döntöttem, hogy megtanulom a Lerna – t – sajnálom a nyelvcsavarót -, de nem akartam fonalra váltani (mivel csak jól érzem magam az npm-Mel). Itt van, hogyan sikerült, hogy ez a munka:

Lerna beállítása NPM-mel a héjból

hozzon létre egy könyvtárat a projekthez, majd írja be ezt a parancsot:

mkdir try-lernacd try-lerna

telepítheti a Lerna-t globálisan (npm i -g lerna), vagy használhatja az npx-vel.

  • Init lerna

    npx lerna init --independent

ez lesz:

  • init a git repository
  • hozzon létre egy package.json
  • hozzon létre egy lerna.json
  • hozzon létre egy packages mappát (itt helyezheti el a munkaterületeket).

csomagok hogyan lerna hívja munkaterületek.

a csomagokat a kívánt módon rendezheti, ha úgy tetszik, az összes csomagot a gyökérmappába helyezheti, majd megváltoztathatja a tömböt, hogy megfeleljen (mint a “fonal munkaterületek” megközelítés).

saját lerna.json fájl stream: true (annak érdekében, hogy gatsby kimenet futtatásakor fejleszteni lerna) és hoist: true (annak érdekében, hogy felemelje node_modules is a parancsot lerna add; elmagyarázom ezt az utolsó funkció előre):

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

ezt manuálisan is hozzáadhatja, vagy használhatja ezt az egyszerű shell parancsot:

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

állvány mappák és fájlok shell

ez a rész kézzel végezhető Jason Lengstorf tanfolyamának első leckéjét követően, amely a bevezetőben található.
csak összegyűjtöm az összes alapvető részt, hogy a shell néhány parancsával teljesítsem őket.
abban az esetben, ha használni szeretné a megközelítésemet, ne felejtse el kicserélni a” név ” szót a téma nevére, majd csak másolja be ezt a parancsot:

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

a csomag kezdeti tartalma.json a webhely mappájában:

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

csomag.json a mappa témájában (cserélje ki újra a nevet, majd helyezze be a YOUR_NPM_USER fájlt):

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

itt az eredmény:

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

PS: azt tanácsolom, hogy hozzon létre egy .gitignore és add hozzá node_modules azonnal:

echo "node_modules" > .gitignore

a Lerna

használatával a Lerna egyik problémája az, hogy egyetlen paranccsal nem lehet csomagonként több függőséget telepíteni (mint a yarn workspace name_workspace add package1 package2 etcesetén). Meg kell csinálni egy-egy, mint ez (ha nem telepíti globálisan akkor meg kell előzni minden parancsot npx):

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

itt --scope site arra szolgál, hogy megmondja Lerna-nak, hogy csak a “site”csomagban telepítse.

azonban telepíthet egy függőséget, mondjuk gatsby, minden csomaghoz csak egy paranccsal:

lerna add gatsby

ez a parancs:

  • telepítse Gatsby minden csomag (tehát ebben az esetben a helyszínen, valamint a téma csomag).
  • ha engedélyezte hoist a lerna.json létrehoz egy node_modules mappát a gyökérben (lásd ‘Lerna Bootstrap forward’):

válassza ki a megközelítést

Ha tetszik ez a megközelítés, folytathatja az összes gyakori függőség telepítését (react, react-dom) a csomagokon. Ha csak egy csomaghoz kell telepítenie néhány függőséget, használja a --scope name_of_the_package parancsot (ne feledje, hogy ez a csomagon megadott név.json nem a mappa neve).

az npm-et úgy is használhatja, hogy minden kívánt függőséget telepít a megfelelő csomagba. De ne feledje, ez a megközelítés telepíti a node_modules függőségek minden egyes mappát. Ez tiszta lehet, majd utána felemelhető. Bár ez az opció érvényes, több időt vesz igénybe.

bármelyik opciót is választja, ne felejtse el hozzáadni/összekapcsolni a helyi témacsomagot a Webhelycsomag függőségeként (használja a beállított nevetpackage.json):

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

Orchestrate mindent Lerna bootstrap

a végén biztonságosan megteheti: 

lerna bootstrap

ez a parancs nagyon hasznos, különösen, ha már megvan a csomagja.a json tele van a megfelelő függőségekkel.

hoist: true opcióval (a lerna.json – on) egy megosztott node_modulesmappát helyez el a gyökérben, majd összekapcsolja a helyi függőségeket a megfelelő package.json – ben.

nagyon szeretem –hoist feature ez egy olyan folyamat, amely elkerüli a node_modules duplikált függőségeit, így fizikai helyet és telepítési időt takarít meg.

ha bármilyen okból meg akarja tisztítani valamit, először megteheti:

lerna clean && lerna link && lerna bootstrap

parancsok és parancsfájlok futtatása

parancsfájlok futtatásához (a package.json – re helyezve) meg kell adnia (vagy nem) a célcsomagot:

lerna run develop --scope Package_name

Lerna is engedi futtatni parancsokat a root minden csomagot (használja dash). Például:

lerna exec -- rm -rf node_modules

ez eltávolítja a csomópont modulokat minden csomag mappából.

frissítés varázsló

a jövőben, amikor frissítenie kell a csomagokat, használhatja a frissítés varázslót:

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

ezután csak ezt a parancsot kell futtatnia, és a varázsló segít: 

lernaupdate