Frontend Monorepo: Lerna in Nx Upravljanje Delovnih Prostorov

V nenehno razvijajočem se okolju sprednjega razvoja lahko upravljanje velikih in zapletenih projektov predstavlja pomemben izziv. Tradicionalne nastavitve z več repozitoriji, čeprav ponujajo izolacijo, lahko vodijo do podvajanja kode, težav z upravljanjem odvisnosti in nedoslednega orodja. Tu se izkaže monorepo arhitektura. Monorepo je en sam repozitorij, ki vsebuje več projektov, pogosto povezanih, ki se gradijo in verzirajo skupaj. Ta pristop ponuja številne prednosti, vendar učinkovito upravljanje monorepa zahteva specializirana orodja. Ta članek obravnava dve priljubljeni rešitvi: Lerna in Nx.

Kaj je Monorepo?

Monorepo je repozitorij sistema za nadzor različic, ki vsebuje kodo za številne projekte. Ti projekti so lahko povezani ali popolnoma neodvisni. Ključno je, da si delijo isti repozitorij. Podjetja, kot so Google, Facebook, Microsoft in Uber, so uspešno sprejela monorepoje za upravljanje svojih obsežnih kodnih baz. Pomislite na Google, ki skoraj vso svojo kodo, vključno z Androidom, Chromom in Gmailom, hrani v enem samem repozitoriju.

Prednosti Monorepa

• Deljenje in Ponovna Uporaba Kode: Preprosto delite kodo med projekti brez zapletenih delovnih tokov pakiranja in objavljanja. Predstavljajte si knjižnico oblikovalskega sistema, ki jo je mogoče brezhibno integrirati v več aplikacij znotraj istega repozitorija.
• Poenostavljeno Upravljanje Odvisnosti: Upravljajte odvisnosti na enem mestu, kar zagotavlja doslednost med vsemi projekti. Posodobitev odvisnosti deljene knjižnice samodejno posodobi vse projekte, ki so od nje odvisni.
• Atomske Spremembe: Izvedite spremembe, ki segajo čez več projektov, v eni sami predanosti, kar zagotavlja doslednost in poenostavlja testiranje. Na primer, refaktoriranje, ki vpliva tako na sprednji kot na zadnji del, se lahko izvede atomsko.
• Izboljšano Sodelovanje: Ekipe lahko enostavno sodelujejo pri različnih projektih znotraj istega repozitorija, kar spodbuja izmenjavo znanja in medfunkcionalni razvoj. Razvijalci lahko enostavno brskajo in razumejo kodo med različnimi ekipami.
• Dosledno Orodje in Praksa: Zagotovite dosledne standarde kodiranja, pravila za lintanje in gradbene procese med vsemi projekti. To izboljšuje kakovost kode in vzdrževanje.
• Poenostavljeno Refaktoriranje: Obsežni projekti refaktoriranja so poenostavljeni, saj je vsa povezana koda znotraj istega repozitorija. Orodja za avtomatizirano refaktoriranje se lahko uporabljajo čez celotno kodno bazo.

Izzivi Monorepa

• Velikost Repozitorija: Monorepoi lahko postanejo zelo veliki, kar lahko upočasni operacije kloniranja in indeksiranja. Orodja, kot so `git sparse-checkout` in `partial clone`, lahko pomagajo ublažiti to težavo.
• Časi Gradnje: Gradnja celotnega monorepa je lahko zamudna, zlasti za velike projekte. Orodja, kot sta Lerna in Nx, ponujata optimizirane gradbene procese za rešitev te težave.
• Nadzor Dostopa: Omejevanje dostopa do določenih delov monorepa je lahko zapleteno. Potrebno je skrbno načrtovanje in izvajanje mehanizmov za nadzor dostopa.
• Zapletenost Orodja: Nastavitev in upravljanje monorepa zahteva specializirana orodja in znanje. Učna krivulja je lahko sprva strma.

Lerna: Upravljanje JavaScript Projektov v Monorepu

Lerna je priljubljeno orodje za upravljanje JavaScript projektov v monorepu. Optimizira delovni tok okoli upravljanja repozitorijev z več paketi z Git in npm. Še posebej je primerna za projekte, ki uporabljajo npm ali Yarn za upravljanje odvisnosti.

Ključne Lastnosti Lerna

• Upravljanje Različic: Lerna lahko samodejno verzira in objavlja pakete na podlagi sprememb, narejenih od zadnje izdaje. Uporablja konvencionalne predanosti za določanje naslednje številke različice.
• Upravljanje Odvisnosti: Lerna upravlja odvisnosti med paketi, kar zagotavlja, da so paketi znotraj monorepa lahko odvisni drug od drugega. Uporablja simbolne povezave za ustvarjanje lokalnih odvisnosti.
• Izvajanje Nalog: Lerna lahko vzporedno izvaja ukaze v več paketih, kar pospešuje gradbene in testne procese. Podpira izvajanje skriptov, definiranih v `package.json`.
• Odkrivanje Spremembe: Lerna lahko zazna, kateri paketi so se spremenili od zadnje izdaje, kar omogoča ciljno usmerjene gradnje in uvedbe.

Primer Uporabe Lerna

Ilustrirajmo Lerna uporabo s poenostavljenim primerom. Predpostavimo, da imamo monorepo z dvema paketoma: `package-a` in `package-b`. `package-b` je odvisen od `package-a`.

monorepo/
├── lerna.json
├── package.json
├── packages/
│   ├── package-a/
│   │   ├── package.json
│   │   └── index.js
│   └── package-b/
│       ├── package.json
│       └── index.js

1. Inicializiraj Lerna:

lerna init

To ustvari `lerna.json` in posodobi korenski `package.json`. Datoteka `lerna.json` konfigurira Lerna vedenje.

2. Namesti Odvisnosti:

npm install
# ali
yarn install

To namesti odvisnosti za vse pakete v monorepu, na podlagi datotek `package.json` v vsakem paketu.

3. Zaženi Ukaz v Paketih:

lerna run test

To izvede `test` skript, definiran v datotekah `package.json` vseh paketov, ki ga imajo definiranega.

4. Objavljanje Paketov:

lerna publish

Ta ukaz analizira zgodovino predanosti, določi, kateri paketi so se spremenili, poveča njihove različice na podlagi konvencionalnih predanosti in jih objavi na npm (ali vaši izbrani aplikaciji).

Konfiguracija Lerna

Datoteka `lerna.json` je srce Lerna konfiguracije. Omogoča vam prilagajanje Lerna vedenja, kot so:

• `packages`: Določa lokacijo paketov znotraj monorepa. Pogosto nastavljeno na `["packages/*"]`.
• `version`: Določa strategijo verzij. Lahko je `independent` (vsak paket ima svojo različico) ali fiksna različica.
• `command`: Omogoča konfiguriranje možnosti za specifične Lerna ukaze, kot sta `publish` in `run`.

Primer `lerna.json`:

{
  "packages": [
    "packages/*"
  ],
  "version": "independent",
  "npmClient": "npm",
  "useWorkspaces": true,
  "command": {
    "publish": {
      "conventionalCommits": true,
      "message": "chore(release): publish"
    }
  }
}

Nx: Pameten, Hiter in Razširljiv Gradbeni Sistem

Nx je zmogljiv gradbeni sistem, ki ponuja napredne funkcije za upravljanje monorepa. Osredotoča se na inkrementalne gradnje, predpomnjenje izračunov in orkestracijo nalog, da znatno izboljša čase gradnje in produktivnost razvijalcev. Medtem ko je Lerna predvsem osredotočena na upravljanje paketov, Nx ponuja bolj celovit pristop k upravljanju celotnega delovnega toka monorepa, vključno s generiranjem kode, lintanjem, testiranjem in uvajanjem.

Ključne Lastnosti Nx

• Inkrementalne Gradnje: Nx analizira graf odvisnosti vaših projektov in ponovno zgradi samo tiste projekte, ki so se spremenili od zadnje gradnje. To drastično zmanjša čase gradnje.
• Predpomnjenje Izračunov: Nx predpomni rezultate nalog, kot so gradnje in testi, tako da jih je mogoče ponovno uporabiti, če se vhodi niso spremenili. To dodatno pospeši razvojne cikle.
• Orkestracija Nalog: Nx zagotavlja zmogljiv sistem orkestracije nalog, ki vam omogoča definiranje kompleksnih gradbenih cevovodov in njihovo učinkovito izvajanje.
• Generiranje Kode: Nx ponuja orodja za generiranje kode, ki vam lahko pomagajo hitro ustvarjati nove projekte, komponente in module, pri čemer sledite najboljšim praksam in doslednim standardom.
• Vtičnik Ekosistem: Nx ima bogat vtičnik ekosistem, ki podpira različne tehnologije in ogrodja, kot so React, Angular, Node.js, NestJS in še več.
• Vizualizacija Grafa Odvisnosti: Nx lahko vizualizira graf odvisnosti vašega monorepa, kar vam pomaga razumeti odnose med projekti in prepoznati potencialne težave.
• Prizadete Ukazi: Nx ponuja ukaze za izvajanje nalog samo na projektih, ki jih je prizadela določena sprememba. To vam omogoča, da svoje napore osredotočite na področja, ki potrebujejo pozornost.

Primer Uporabe Nx

Ilustrirajmo Nx uporabo s poenostavljenim primerom. Ustvarili bomo monorepo z React aplikacijo in Node.js knjižnico.

1. Namesti Nx CLI Globalno:

npm install -g create-nx-workspace

2. Ustvari Novo Nx Delovno Prostor:

create-nx-workspace my-monorepo --preset=react
cd my-monorepo

To ustvari nov Nx delovni prostor z React aplikacijo. Možnost `--preset=react` pove Nx, da inicializira delovni prostor z nastavitvami, specifičnimi za React.

3. Generiraj Knjižnico:

nx generate @nrwl/node:library my-library

To generira novo Node.js knjižnico z imenom `my-library`. Nx samodejno konfigurira knjižnico in njene odvisnosti.

4. Zgradi Aplikacijo:

nx build my-app

To zgradi React aplikacijo. Nx analizira graf odvisnosti in ponovno zgradi samo potrebne datoteke.

5. Zaženi Teste:

nx test my-app

To zažene enotske teste za React aplikacijo. Nx predpomni rezultate testov, da pospeši naknadne teste.

6. Ogled Grafa Odvisnosti:

nx graph

To odpre spletni vmesnik, ki vizualizira graf odvisnosti monorepa.

Konfiguracija Nx

Nx je konfiguriran prek datoteke `nx.json`, ki se nahaja v korenskem direktoriju delovnega prostora. Ta datoteka definira projekte v delovnem prostoru, njihove odvisnosti in naloge, ki se lahko izvajajo na njih.

Ključne konfiguracijske možnosti v `nx.json` vključujejo:

• `projects`: Definira projekte v delovnem prostoru in njihovo konfiguracijo, kot sta njihova korenskadirektorij in gradbeni cilji.
• `tasksRunnerOptions`: Konfigurira izvajalnik nalog, ki je odgovoren za izvajanje nalog in predpomnjenje njihovih rezultatov.
• `affected`: Konfigurira, kako Nx določa, kateri projekti so prizadeti s spremembo.

Primer `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 proti Nx: Kaj Izbrati?

Tako Lerna kot Nx sta odlični orodji za upravljanje frontend monorepov, vendar skrbita za nekoliko različne potrebe. Tukaj je primerjava, ki vam bo pomagala izbrati pravo za vaš projekt:

Lastnost	Lerna	Nx
Osredotočenost	Upravljanje Paketov	Gradbeni Sistem in Orkestracija Nalog
Inkrementalne Gradnje	Omejeno (zahteva zunanja orodja)	Vgrajeno in visoko optimizirano
Predpomnjenje Izračunov	Ne	Da
Generiranje Kode	Ne	Da
Vtičnik Ekosistem	Omejeno	Obsežno
Učna Krivulja	Nižja	Višja
Zapletenost	Preprostejše	Bolj Zapleteno
Primeri Uporabe	Projekti, osredotočeni predvsem na upravljanje in objavljanje npm paketov.	Veliki in kompleksni projekti, ki zahtevajo optimizirane čase gradnje, generiranje kode in celovit gradbeni sistem.

Izberite Lerna, če:

• Predvsem potrebujete upravljanje in objavljanje npm paketov.
• Vaš projekt je relativno majhen do srednje velik.
• Raje imate preprostejše orodje z nižjo učno krivuljo.
• Že poznate npm in Yarn.

Izberite Nx, če:

• Potrebujete optimizirane čase gradnje in inkrementalne gradnje.
• Želite zmožnosti generiranja kode.
• Potrebujete celovit gradbeni sistem z orkestracijo nalog.
• Vaš projekt je velik in kompleksen.
• Ste pripravljeni vložiti čas v učenje zmogljivejšega orodja.

Lahko uporabljate Lerna z Nx?

Da, Lerna in Nx se lahko uporabljata skupaj. Ta kombinacija vam omogoča izkoristiti Lerna upravljanje paketov, hkrati pa izkoristiti Nx optimiziran gradbeni sistem in orkestracijo nalog. Nx je mogoče konfigurirati kot izvajalnik nalog za Lerna, kar zagotavlja inkrementalne gradnje in predpomnjenje izračunov za pakete, ki jih upravlja Lerna.

Najboljše Prakse za Upravljanje Frontend Monorepa

Ne glede na to, ali izberete Lerna ali Nx, je upoštevanje najboljših praks ključno za uspešno upravljanje frontend monorepa:

• Vzpostavite Jasno Strukturo Projektov: Organizirajte svoje projekte logično in dosledno. Uporabite jasno konvencijo poimenovanja za pakete in knjižnice.
• Zagotovite Dosledne Standarde Kodiranja: Uporabite lint-orodja in oblikovalnike za zagotavljanje doslednega sloga kode med vsemi projekti. Orodja, kot sta ESLint in Prettier, je mogoče integrirati v vaš delovni tok.
• Avtomatizirajte Procese Gradnje in Testiranja: Uporabite CI/CD cevovode za avtomatizacijo procesov gradnje, testiranja in uvajanja. Uporabite se lahko orodja, kot so Jenkins, CircleCI in GitHub Actions.
• Uvedite Preglede Kode: Izvedite temeljite preglede kode za zagotavljanje kakovosti kode in vzdrževanja. Uporabite zahteve za poteg in orodja za preglede kode.
• Spremljajte Čase Gradnje in Učinkovitost: Sledite časom gradnje in metrikam učinkovitosti, da prepoznate ozka grla in področja za izboljšave. Nx ponuja orodja za analizo učinkovitosti gradnje.
• Dokumentirajte Svojo Strukturo Monorepa in Procese: Ustvarite jasno dokumentacijo, ki pojasnjuje strukturo vašega monorepa, uporabljena orodja in tehnologije ter delovne tokove razvoja.
• Sprejmite Konvencionalne Predanosti: Uporabite konvencionalne predanosti za avtomatizacijo procesov verzij in izdaj. Lerna podpira konvencionalne predanosti iz škatle.

Zaključek

Frontend monorepoi ponujajo pomembne prednosti pri upravljanju velikih in kompleksnih projektov, vključno z deljenjem kode, poenostavljenim upravljanjem odvisnosti in izboljšanim sodelovanjem. Lerna in Nx sta zmogljivi orodji, ki vam lahko pomagata učinkovito upravljati frontend monorepo. Lerna je odlična izbira za upravljanje npm paketov, medtem ko Nx zagotavlja celovitejši gradbeni sistem z naprednimi funkcijami, kot so inkrementalne gradnje in generiranje kode. Z natančnim upoštevanjem potreb vašega projekta in upoštevanjem najboljših praks lahko uspešno sprejmete frontend monorepo in izkoristite njegove prednosti.

Ne pozabite upoštevati dejavnikov, kot so izkušnje vaše ekipe, zapletenost projekta in zahteve glede učinkovitosti, pri izbiri med Lerna in Nx. Eksperimentirajte z obema orodjema in poiščite tisto, ki najbolje ustreza vašim specifičnim potrebam.

Srečno na vaši monorepo poti!