Fedezze fel a frontend monorepók erejét a Lerna és Nx segítségével. Ismerje meg a munkahelykezelést, kódmegosztást és hatékony buildokat.
Frontend Monorepo: Lerna és Nx Munkahelykezelés
A frontend fejlesztés folyamatosan változó világában a nagy és összetett projektek kezelése jelentős kihívást jelenthet. A hagyományos több-repo beállítások, bár szigetelést kínálnak, kódismétléshez, függőségkezelési fejfájásokhoz és következetlen eszközkészletekhez vezethetnek. Itt jön be a monorepo architektúra. A monorepo egyetlen adattár, amely több, gyakran kapcsolódó projektet tartalmaz, amelyeket együtt építenek és verzióznak. Ez a megközelítés számos előnnyel jár, de egy monorepo hatékony kezelése speciális eszközöket igényel. Ez a cikk két népszerű megoldást vizsgál meg: a Lernát és az Nx-et.
Mi az a Monorepo?
A monorepo egy verziókezelési rendszer adattár, amely sok projekt kódját tartalmazza. Ezek a projektek lehetnek kapcsolódóak vagy teljesen függetlenek. A lényeg, hogy ugyanazt az adattárat osztják meg. Olyan cégek, mint a Google, a Facebook, a Microsoft és az Uber sikeresen alkalmazták a monorepókat hatalmas kódméreteik kezelésére. Gondoljon a Google-ra, amely szinte az összes kódját, beleértve az Androidot, a Chrome-ot és a Gmailt is, egyetlen adattárban tárolja.
A Monorepo Előnyei
- Kódmegosztás és Újrafelhasználás: Könnyen megoszthat kódot projektek között bonyolult csomagolási és közzétételi munkafolyamatok nélkül. Képzeljen el egy dizájnrendszer-könyvtárat, amelyet zökkenőmentesen integrálhat több alkalmazásba ugyanazon az adattáron belül.
- Egyszerűsített Függőségkezelés: Kezelje a függőségeket egyetlen helyen, biztosítva a következetességet az összes projekt között. Egy megosztott könyvtár függőségének frissítése automatikusan frissíti az összes rá függő projektet.
- Atomikus Változások: Változtatásokat hajtson végre, amelyek több projektet érintenek egyetlen lekérésben, biztosítva a következetességet és egyszerűsítve a tesztelést. Például egy refaktorálás, amely mind a frontendet, mind a backendet érinti, atomikusan elvégezhető.
- Továbbfejlesztett Együttműködés: A csapatok könnyen együttműködhetnek különböző projekteken ugyanazon az adattáron belül, elősegítve a tudásmegosztást és a keresztfunkcionális fejlesztést. A fejlesztők könnyen böngészhetnek és megérthetnek kódot a különböző csapatok között.
- Következetes Ezközök és Gyakorlatok: Érvényesítse a következetes kódolási szabványokat, a linting szabályokat és a build folyamatokat az összes projektben. Ez javítja a kódminőséget és karbantarthatóságát.
- Egyszerűsített Refaktorálás: A nagyszabású refaktorálási projektek egyszerűsödnek, mivel minden kapcsolódó kód ugyanazon az adattáron belül található. Automatikus refaktorálási eszközök használhatók az egész kódméreten.
A Monorepo Kihívásai
- Adattár Mérete: A monorepok nagyon nagyokká válhatnak, ami potenciálisan lassíthatja a klónozási és indexelési műveleteket. Az olyan eszközök, mint a `git sparse-checkout` és a `partial clone` segíthetnek ennek a problémának a mérséklésében.
- Build Idők: Az egész monorepo buildolása időigényes lehet, különösen nagy projektek esetén. Az olyan eszközök, mint a Lerna és az Nx optimalizált build folyamatokat kínálnak ennek megoldására.
- Hozzáférési Vezérlés: A monorepo bizonyos részeire való hozzáférés korlátozása bonyolult lehet. Hozzáférési vezérlési mechanizmusok gondos tervezése és végrehajtása szükséges.
- Eszközkészlet Bonyolultsága: Egy monorepo beállítása és kezelése speciális eszközkészletet és tudást igényel. A tanulási görbe kezdetben meredek lehet.
Lerna: JavaScript Projektek Kezelése Monorepóban
A Lerna egy népszerű eszköz a JavaScript projektek monorepóban történő kezelésére. Optimalizálja a munkafolyamatot a több csomagot tartalmazó adattárak Git és npm segítségével történő kezelése körül. Különösen alkalmas olyan projektekhez, amelyek npm-et vagy Yarn-t használnak a függőségkezeléshez.
A Lerna Főbb Jellemzői
- Verziókezelés: A Lerna automatikusan verziózhatja és közzéteheti a csomagokat az utolsó kiadás óta történt változások alapján. Hagyományos commitokat használ a következő verziószám meghatározására.
- Függőségkezelés: A Lerna kezeli a csomagok közötti függőségeket, biztosítva, hogy a monorepón belüli csomagok egymásra támaszkodhassanak. Helyi függőségek létrehozásához szimlinkeket használ.
- Feladat Végrehajtás: A Lerna párhuzamosan végrehajthat parancsokat több csomagon keresztül, felgyorsítva a build és tesztelési folyamatokat. Támogatja a `package.json`-ban definiált szkriptek futtatását.
- Változás Érzékelés: A Lerna képes felismerni, hogy mely csomagok változtak az utolsó kiadás óta, lehetővé téve a célzott buildokat és telepítéseket.
Lerna Használati Példa
Illusztráljuk a Lerna használatát egy egyszerűsített példával. Tegyük fel, hogy egy monoreponk van két csomaggal: `package-a` és `package-b`. A `package-b` a `package-a`-ra támaszkodik.
monorepo/
├── lerna.json
├── package.json
├── packages/
│ ├── package-a/
│ │ ├── package.json
│ │ └── index.js
│ └── package-b/
│ ├── package.json
│ └── index.js
1. Lerna Inicializálása:
lerna init
Ez létrehozza a `lerna.json`-t és frissíti a gyökér `package.json`-t. A `lerna.json` fájl konfigurálja a Lerna viselkedését.
2. Függőségek Telepítése:
npm install
# vagy
yarn install
Ez telepíti a függőségeket a monorepo összes csomagjához, az egyes csomagok `package.json` fájljai alapján.
3. Parancs Futtatása Csomagokon Keresztül:
lerna run test
Ez végrehajtja a `test` szkriptet, amely minden csomag `package.json` fájljában definiálva van, amely rendelkezik vele.
4. Csomagok Közzététele:
lerna publish
Ez a parancs elemzi a commit történetet, meghatározza, hogy mely csomagok változtak, frissíti azok verzióit a hagyományos commitok alapján, és közzéteszi őket az npm-re (vagy a választott regisztrátorra).
Lerna Konfiguráció
A `lerna.json` fájl a Lerna konfigurációjának szíve. Lehetővé teszi a Lerna viselkedésének testreszabását, például:
- `packages`: Meghatározza a csomagok helyét a monorepóban. Gyakran `["packages/*"]`-ra van állítva.
- `version`: Meghatározza a verziózási stratégiát. Lehet `independent` (minden csomag saját verzióval rendelkezik) vagy egy rögzített verzió.
- `command`: Lehetővé teszi az opciók konfigurálását specifikus Lerna parancsokhoz, mint például a `publish` és a `run`.
Példa `lerna.json`:
{
"packages": [
"packages/*"
],
"version": "independent",
"npmClient": "npm",
"useWorkspaces": true,
"command": {
"publish": {
"conventionalCommits": true,
"message": "chore(release): publish"
}
}
}
Nx: Intelligens, Gyors és Bővíthető Build Rendszer
Az Nx egy hatékony build rendszer, amely fejlett funkciókat kínál a monorepo kezeléséhez. Az inkrementális buildokra, a számítási gyorsítótárazásra és a feladatok orkesztrálására összpontosít, hogy jelentősen javítsa a build időket és a fejlesztői termelékenységet. Míg a Lerna elsősorban a csomagok kezelésére összpontosít, az Nx egy átfogóbb megközelítést kínál a teljes monorepo munkafolyamat kezeléséhez, beleértve a kódgenerálást, lintinget, tesztelést és telepítést.
Az Nx Főbb Jellemzői
- Inkrementális Buildok: Az Nx elemzi a projektek függőségi grafikonját, és csak azokat a projekteket építi újra, amelyek az utolsó build óta megváltoztak. Ez drámaian csökkenti a build időket.
- Számítási Gyorsítótárazás: Az Nx gyorsítótárazza a feladatok eredményeit, mint például a buildok és tesztek, így azok újrafelhasználhatók, ha a bemenetek nem változtak. Ez tovább gyorsítja a fejlesztési ciklusokat.
- Feladat Orkesztrálás: Az Nx egy hatékony feladat orkesztrálási rendszert kínál, amely lehetővé teszi összetett build folyamatok meghatározását és hatékony végrehajtását.
- Kódgenerálás: Az Nx kódgenerálási eszközöket kínál, amelyek segíthetnek új projektek, komponensek és modulok gyors létrehozásában, legjobb gyakorlatokat és következetes szabványokat követve.
- Plugin Ökoszisztéma: Az Nx gazdag plugin ökoszisztémával rendelkezik, amely támogatja a különböző technológiákat és keretrendszereket, mint például a React, Angular, Node.js, NestJS és még sok más.
- Függőségi Grafikon Vizualizáció: Az Nx vizualizálhatja a monorepo függőségi grafikonját, segítve megérteni a projektek közötti kapcsolatokat és azonosítani a potenciális problémákat.
- Érintett Parancsok: Az Nx parancsokat kínál a feladatok csak az érintett projekteken történő futtatásához egy adott változás következtében. Ez lehetővé teszi, hogy erőfeszítéseit azokra a területekre összpontosítsa, amelyek figyelmet igényelnek.
Nx Használati Példa
Illusztráljuk az Nx használatát egy egyszerűsített példával. Létrehozunk egy monorepot egy React alkalmazással és egy Node.js könyvtárral.
1. Nx CLI Globális Telepítése:
npm install -g create-nx-workspace
2. Új Nx Munkahely Létrehozása:
create-nx-workspace my-monorepo --preset=react
cd my-monorepo
Ez létrehoz egy új Nx munkahelyet egy React alkalmazással. A `--preset=react` opció arra utasítja az Nx-et, hogy inicializálja a munkahelyet React-specifikus konfigurációkkal.
3. Könyvtár Generálása:
nx generate @nrwl/node:library my-library
Ez létrehoz egy új Node.js könyvtárat `my-library` néven. Az Nx automatikusan konfigurálja a könyvtárat és annak függőségeit.
4. Az Alkalmazás Buildolása:
nx build my-app
Ez buildolja a React alkalmazást. Az Nx elemzi a függőségi grafikonját, és csak a szükséges fájlokat építi újra.
5. Tesztek Futtatása:
nx test my-app
Ez futtatja a React alkalmazás egységtesztjeit. Az Nx gyorsítótárazza a teszteredményeket az azt követő tesztfuttatások felgyorsítása érdekében.
6. Függőségi Grafikon Megtekintése:
nx graph
Ez megnyit egy webes felületet, amely vizualizálja a monorepo függőségi grafikonját.
Nx Konfiguráció
Az Nx a `nx.json` fájlon keresztül konfigurálható, amely a munkahely gyökérében található. Ez a fájl definiálja a munkahelyen belüli projekteket, azok függőségeit és azokon végrehajtható feladatokat.
A `nx.json` kulcsfontosságú konfigurációs opciói a következők:
- `projects`: Meghatározza a munkahelyen belüli projekteket és azok konfigurációját, például a gyökér könyvtárukat és a build célokat.
- `tasksRunnerOptions`: Konfigurálja a feladat futtatót, amely felelős a feladatok végrehajtásáért és azok eredményeinek gyorsítótárazásáért.
- `affected`: Konfigurálja, hogyan határozza meg az Nx, hogy mely projekteket érint egy változás.
Példa `nx.json`:
{
"npmScope": "my-org",
"affected": {
"defaultBase": "main"
},
"implicitDependencies": {
"package.json": {
"dependencies": "*",
"devDependencies": "*"
},
".eslintrc.json": "*"
},
"tasksRunnerOptions": {
"default": {
"runner": "nx-cloud",
"options": {
"cacheableOperations": ["build", "lint", "test", "e2e"],
"accessToken": "...",
"canTrackAnalytics": false,
"showUsageWarnings": false
}
}
},
"targetDefaults": {
"build": {
"dependsOn": ["^build"],
"inputs": ["production", "default"],
"outputs": ["{projectRoot}/dist"]
}
},
"namedInputs": {
"default": ["{projectRoot}/**/*", "!{projectRoot}/dist/**/*", "!{projectRoot}/tmp/**/*"],
"production": ["!{projectRoot}/**/*.spec.ts", "!{projectRoot}/**/*.spec.tsx", "!{projectRoot}/**/*.spec.js", "!{projectRoot}/**/*.spec.jsx"]
},
"generators": {
"@nrwl/react": {
"application": {
"style": "css",
"linter": "eslint",
"unitTestRunner": "jest"
},
"library": {
"style": "css",
"linter": "eslint",
"unitTestRunner": "jest"
},
"component": {
"style": "css"
}
}
}
}
Lerna vs. Nx: Melyiket Válasszuk?
Mind a Lerna, mind az Nx kiváló eszközök frontend monorepok kezelésére, de kissé eltérő igényeket elégítenek ki. Íme egy összehasonlítás, amely segít kiválasztani a projektjéhez legmegfelelőbbet:
| Jellemző | Lerna | Nx |
|---|---|---|
| Fókusz | Csomagkezelés | Build Rendszer és Feladat Orkesztrálás |
| Inkrementális Buildok | Korlátozott (külső eszközöket igényel) | Beépített és nagymértékben optimalizált |
| Számítási Gyorsítótárazás | Nem | Igen |
| Kódgenerálás | Nem | Igen |
| Plugin Ökoszisztéma | Korlátozott | Kiterjedt |
| Tanulási Görbe | Alacsonyabb | Magasabb |
| Bonyolultság | Egyszerűbb | Bonyolultabb |
| Használati Esetek | Olyan projektek, amelyek elsősorban npm csomagok kezelésére és közzétételére összpontosítanak. | Nagy és összetett projektek, amelyek optimalizált build időket, kódgenerálást és átfogó build rendszert igényelnek. |
Válassza a Lernát, ha:
- Elsősorban npm csomagokat kell kezelnie és közzétennie.
- A projektje viszonylag kicsi vagy közepes méretű.
- Egyszerűbb eszközt részesít előnyben, alacsonyabb tanulási görbével.
- Már ismeri az npm-et és a Yarn-t.
Válassza az Nx-et, ha:
- Optimalizált build időket és inkrementális buildokat igényel.
- Kódgenerálási képességeket szeretne.
- Átfogó build rendszert igényel feladat orkesztrálással.
- A projektje nagy és összetett.
- Kész befektetni időt egy erősebb eszköz megismerésébe.
Használható a Lerna az Nx-szel?
Igen, a Lerna és az Nx együtt használható. Ez a kombináció lehetővé teszi a Lerna csomagkezelési képességeinek kihasználását, miközben részesül az Nx optimalizált build rendszeréből és feladat orkesztrálásából. Az Nx konfigurálható a Lerna feladat futtatójaként, inkrementális buildokat és számítási gyorsítótárazást biztosítva a Lerna által kezelt csomagok számára.
Legjobb Gyakorlatok a Frontend Monorepo Kezeléséhez
Függetlenül attól, hogy a Lernát vagy az Nx-et választja, a legjobb gyakorlatok követése kulcsfontosságú a frontend monorepo sikeres kezeléséhez:
- Világos Projektstruktúra Létrehozása: Szervezze projektjeit logikusan és következetesen. Használjon egyértelmű elnevezési konvenciókat a csomagok és könyvtárak számára.
- Következetes Kódolási Szabványok Érvényesítése: Használjon linereket és formázókat a következetes kódstílus biztosításához minden projektben. Az olyan eszközök, mint az ESLint és a Prettier integrálhatók a munkafolyamatba.
- Build és Teszt Folyamatok Automatizálása: Használjon CI/CD folyamatokat a build, teszt és telepítési folyamatok automatizálásához. Használhatók olyan eszközök, mint a Jenkins, a CircleCI és a GitHub Actions.
- Kódellenőrzések Bevezetése: Végezzen alapos kódellenőrzéseket a kódminőség és karbantarthatóság biztosítása érdekében. Használjon pull requesteket és kódellenőrző eszközöket.
- Build Idők és Teljesítmény Monitorozása: Kövesse nyomon a build időket és a teljesítménymutatókat a szűk keresztmetszetek és a fejlesztési területek azonosítása érdekében. Az Nx eszközöket kínál a build teljesítményének elemzéséhez.
- Dokumentálja Monorepo Struktúráját és Folyamatait: Hozzon létre egyértelmű dokumentációt, amely elmagyarázza a monorepo struktúráját, a használt eszközöket és technológiákat, valamint a fejlesztési munkafolyamatokat.
- Hagyományos Commitok Elfogadása: Használjon hagyományos commitokat a verziózási és kiadási folyamatok automatizálásához. A Lerna alapértelmezés szerint támogatja a hagyományos commitokat.
Következtetés
A frontend monorepok jelentős előnyöket kínálnak nagy és összetett projektek kezeléséhez, beleértve a kódmegosztást, az egyszerűsített függőségkezelést és a továbbfejlesztett együttműködést. A Lerna és az Nx hatékony eszközök, amelyek segíthetnek a frontend monorepo hatékony kezelésében. A Lerna nagyszerű választás az npm csomagok kezeléséhez, míg az Nx átfogóbb build rendszert kínál olyan fejlett funkciókkal, mint az inkrementális buildok és a kódgenerálás. A projekt igényeinek gondos mérlegelése és a legjobb gyakorlatok követése révén sikeresen adoptálhat egy frontend monorepot, és élvezheti annak előnyeit.
Ne felejtse el figyelembe venni az olyan tényezőket, mint a csapat tapasztalata, a projekt összetettsége és a teljesítményigények, amikor a Lerna és az Nx között választ. Kísérletezzen mindkét eszközzel, és találja meg azt, amelyik a legjobban megfelel az Ön specifikus igényeinek.
Sok sikert a monorepo útjához!