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!