Frontend Monorepo: Lerna ir Nx Darbo Erdvės Valdymas

Nuolat besikeičiančioje frontend programavimo aplinkoje, didelių ir sudėtingų projektų valdymas gali būti didelis iššūkis. Tradicinės kelių saugyklų sąrankos, nors ir siūlo izoliaciją, gali sukelti kodo dubliavimą, priklausomybių valdymo galvos skausmus ir nenuoseklius įrankius. Čia monorepo architektūra atsiskleidžia visu gražumu. Monorepo yra viena saugykla, kurioje yra keli projektai, dažnai susiję, kurie yra kuriami ir versijuojami kartu. Šis požiūris siūlo daugybę privalumų, tačiau efektyvus monorepo valdymas reikalauja specializuotų įrankių. Šiame straipsnyje apžvelgiame du populiarius sprendimus: Lerna ir Nx.

Kas yra Monorepo?

Monorepo yra versijų valdymo sistemos saugykla, kurioje saugomas daugelio projektų kodas. Šie projektai gali būti susiję arba visiškai nepriklausomi. Svarbiausia, kad jie dalijasi ta pačia saugykla. Tokios įmonės kaip „Google“, „Facebook“, „Microsoft“ ir „Uber“ sėkmingai pritaikė monorepos savo didžiulėms kodų bazėms valdyti. Pagalvokite apie „Google“, kuri vienoje saugykloje saugo beveik visą savo kodą, įskaitant „Android“, „Chrome“ ir „Gmail“.

Monorepo pranašumai

• Kodo dalijimasis ir pakartotinis naudojimas: Lengvai dalinkitės kodu tarp projektų be sudėtingų pakavimo ir publikavimo darbo procesų. Įsivaizduokite dizaino sistemos biblioteką, kurią galima sklandžiai integruoti į kelias programas toje pačioje saugykloje.
• Supaprastintas priklausomybių valdymas: Valdykite priklausomybes vienoje vietoje, užtikrindami nuoseklumą visuose projektuose. Atnaujinus bendrinamos bibliotekos priklausomybę, automatiškai atnaujinami visi projektai, kurie nuo jos priklauso.
• Atominiai pakeitimai: Atlikite pakeitimus, kurie apima kelis projektus vienu įsipareigojimu, užtikrindami nuoseklumą ir supaprastindami testavimą. Pavyzdžiui, refaktoringas, kuris turi įtakos tiek frontend, tiek backend, gali būti atliktas atomiškai.
• Pagerintas bendradarbiavimas: Komandos gali lengvai bendradarbiauti vykdant skirtingus projektus toje pačioje saugykloje, skatinant žinių dalijimąsi ir tarpfunkcinį kūrimą. Kūrėjai gali lengvai naršyti ir suprasti kodą skirtingose komandose.
• Nuoseklūs įrankiai ir praktika: Užtikrinkite nuoseklius kodavimo standartus, „linting“ taisykles ir kūrimo procesus visuose projektuose. Tai pagerina kodo kokybę ir prižiūrimumą.
• Supaprastintas refaktoringas: Didelio masto refaktoringo projektai supaprastinami, nes visas susijęs kodas yra toje pačioje saugykloje. Automatizuoti refaktoringo įrankiai gali būti naudojami visoje kodo bazėje.

Monorepo iššūkiai

• Saugyklos dydis: Monorepos gali tapti labai didelės, o tai gali sulėtinti klonavimo ir indeksavimo operacijas. Tokie įrankiai kaip `git sparse-checkout` ir `partial clone` gali padėti sušvelninti šią problemą.
• Kūrimo laikas: Viso monorepo kūrimas gali užtrukti, ypač dideliems projektams. Tokie įrankiai kaip Lerna ir Nx siūlo optimizuotus kūrimo procesus, kad tai išspręstų.
• Prieigos kontrolė: Apriboti prieigą prie konkrečių monorepo dalių gali būti sudėtinga. Reikalingas kruopštus planavimas ir prieigos kontrolės mechanizmų įgyvendinimas.
• Įrankių sudėtingumas: Monorepo nustatymas ir valdymas reikalauja specializuotų įrankių ir žinių. Pradžioje mokymosi kreivė gali būti stati.

Lerna: JavaScript projektų valdymas Monorepo

Lerna yra populiarus įrankis, skirtas JavaScript projektams valdyti monorepo. Jis optimizuoja darbo eigą aplink daugelio paketų saugyklų valdymą naudojant „Git“ ir „npm“. Jis ypač tinka projektams, kuriuose priklausomybių valdymui naudojamas „npm“ arba „Yarn“.

Pagrindinės Lerna funkcijos

• Versijų valdymas: Lerna gali automatiškai versijuoti ir publikuoti paketus pagal pakeitimus, padarytus nuo paskutinio leidimo. Jis naudoja įprastus įsipareigojimus, kad nustatytų kitą versijos numerį.
• Priklausomybių valdymas: Lerna tvarko paketų tarpusavio priklausomybes, užtikrindama, kad paketai monorepo viduje gali priklausyti vienas nuo kito. Jis naudoja simbolines nuorodas, kad sukurtų vietines priklausomybes.
• Užduočių vykdymas: Lerna gali vykdyti komandas vienu metu keliuose paketuose, pagreitindama kūrimo ir testavimo procesus. Jis palaiko scenarijų, apibrėžtų `package.json`, vykdymą.
• Pakeitimų aptikimas: Lerna gali aptikti, kurie paketai pasikeitė nuo paskutinio leidimo, leisdama tikslinius kūrimus ir diegimus.

Lerna naudojimo pavyzdys

Iliustruokime Lerna naudojimą supaprastintu pavyzdžiu. Tarkime, kad turime monorepo su dviem paketais: `package-a` ir `package-b`. `package-b` priklauso nuo `package-a`.

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

1. Inicializuokite Lerna:

lerna init

Tai sukuria `lerna.json` ir atnaujina šakninį `package.json`. Failas `lerna.json` konfigūruoja Lerna elgesį.

2. Įdiekite priklausomybes:

npm install
# or
yarn install

Tai įdiegia visų paketų priklausomybes monorepo, remiantis `package.json` failais kiekviename pakete.

3. Vykdykite komandą visuose paketuose:

lerna run test

Tai vykdo `test` scenarijų, apibrėžtą `package.json` failuose visų paketų, kurie jį apibrėžė.

4. Publikuokite paketus:

lerna publish

Ši komanda analizuoja įsipareigojimų istoriją, nustato, kurie paketai pasikeitė, padidina jų versijas, remiantis įprastais įsipareigojimais, ir publikuoja juos „npm“ (arba jūsų pasirinktame registre).

Lerna konfigūracija

Failas `lerna.json` yra Lerna konfigūracijos pagrindas. Jis leidžia tinkinti Lerna elgesį, pvz.:

• `packages`: Nurodo paketų vietą monorepo. Dažnai nustatoma kaip `["packages/*"]`.
• `version`: Nurodo versijos strategiją. Gali būti `independent` (kiekvienas paketas turi savo versiją) arba fiksuota versija.
• `command`: Leidžia konfigūruoti parinktis konkrečioms Lerna komandoms, tokioms kaip `publish` ir `run`.

Lerna.json pavyzdys:

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

Nx: Išmani, greita ir išplečiama kūrimo sistema

Nx yra galinga kūrimo sistema, kuri suteikia pažangias funkcijas monorepo valdymui. Jis orientuotas į inkrementinius kūrimus, skaičiavimų kaupimą ir užduočių organizavimą, kad žymiai pagerintų kūrimo laiką ir kūrėjų produktyvumą. Nors Lerna daugiausia dėmesio skiria paketų valdymui, Nx siūlo išsamesnį požiūrį į viso monorepo darbo eigos valdymą, įskaitant kodo generavimą, „linting“, testavimą ir diegimą.

Pagrindinės Nx funkcijos

• Inkrementiniai kūrimai: Nx analizuoja jūsų projektų priklausomybių grafiką ir atkuria tik tuos projektus, kurie pasikeitė nuo paskutinio kūrimo. Tai žymiai sumažina kūrimo laiką.
• Skaičiavimų kaupimas: Nx kaupia užduočių, tokių kaip kūrimai ir testai, rezultatus, kad juos būtų galima pakartotinai panaudoti, jei įvestys nepasikeitė. Tai dar labiau pagreitina kūrimo ciklus.
• Užduočių organizavimas: Nx suteikia galingą užduočių organizavimo sistemą, kuri leidžia apibrėžti sudėtingus kūrimo vamzdynus ir efektyviai juos vykdyti.
• Kodo generavimas: Nx suteikia kodo generavimo įrankius, kurie gali padėti greitai sukurti naujus projektus, komponentus ir modulius, laikantis geriausios praktikos ir nuoseklių standartų.
• Įskiepių ekosistema: Nx turi turtingą įskiepių ekosistemą, kuri palaiko įvairias technologijas ir sistemas, tokias kaip React, Angular, Node.js, NestJS ir kt.
• Priklausomybių grafiko vizualizavimas: Nx gali vizualizuoti jūsų monorepo priklausomybių grafiką, padėdamas suprasti ryšius tarp projektų ir nustatyti galimas problemas.
• Paveiktos komandos: Nx pateikia komandas, skirtas užduotims vykdyti tik tuose projektuose, kuriuos paveikė konkretus pakeitimas. Tai leidžia sutelkti dėmesį į tas sritis, kurioms reikia dėmesio.

Nx naudojimo pavyzdys

Iliustruokime Nx naudojimą supaprastintu pavyzdžiu. Sukursime monorepo su React programa ir Node.js biblioteka.

1. Įdiekite Nx CLI globaliai:

npm install -g create-nx-workspace

2. Sukurkite naują Nx darbo erdvę:

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

Tai sukuria naują Nx darbo erdvę su React programa. Parinktis `--preset=react` nurodo Nx inicializuoti darbo erdvę su React specifinėmis konfigūracijomis.

3. Sukurkite biblioteką:

nx generate @nrwl/node:library my-library

Tai sukuria naują Node.js biblioteką, pavadintą `my-library`. Nx automatiškai konfigūruoja biblioteką ir jos priklausomybes.

4. Sukurkite programą:

nx build my-app

Tai sukuria React programą. Nx analizuoja priklausomybių grafiką ir atkuria tik reikalingus failus.

5. Vykdykite testus:

nx test my-app

Tai vykdo React programos vienetinius testus. Nx kaupia testų rezultatus, kad pagreitintų vėlesnius testų vykdymus.

6. Peržiūrėkite priklausomybių grafiką:

nx graph

Tai atidaro žiniatinklio sąsają, kuri vizualizuoja monorepo priklausomybių grafiką.

Nx konfigūracija

Nx konfigūruojamas per failą `nx.json`, kuris yra darbo erdvės šakniniame kataloge. Šis failas apibrėžia projektus darbo erdvėje, jų priklausomybes ir užduotis, kurias galima vykdyti su jais.

Pagrindinės konfigūracijos parinktys faile `nx.json` apima:

• `projects`: Apibrėžia projektus darbo erdvėje ir jų konfigūraciją, pvz., jų šakninį katalogą ir kūrimo tikslus.
• `tasksRunnerOptions`: Konfigūruoja užduočių vykdyklę, kuri yra atsakinga už užduočių vykdymą ir jų rezultatų kaupimą.
• `affected`: Konfigūruoja, kaip Nx nustato, kurie projektai yra paveikti pakeitimo.

Nx.json pavyzdys:

{
  "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: Kurį pasirinkti?

Tiek Lerna, tiek Nx yra puikūs įrankiai frontend monorepos valdymui, tačiau jie patenkina šiek tiek skirtingus poreikius. Štai palyginimas, kuris padės jums pasirinkti tinkamą savo projektui:

Funkcija	Lerna	Nx
Fokusas	Paketų valdymas	Kūrimo sistema ir užduočių organizavimas
Inkrementiniai kūrimai	Ribotas (reikalingi išoriniai įrankiai)	Integruotas ir labai optimizuotas
Skaičiavimų kaupimas	Ne	Taip
Kodo generavimas	Ne	Taip
Įskiepių ekosistema	Ribota	Plati
Mokymosi kreivė	Žemesnė	Aukštesnė
Sudėtingumas	Paprastesnis	Sudėtingesnis
Naudojimo atvejai	Projektai, daugiausia dėmesio skiriant npm paketų valdymui ir publikavimui.	Dideli ir sudėtingi projektai, kuriems reikia optimizuoto kūrimo laiko, kodo generavimo ir visapusiškos kūrimo sistemos.

Pasirinkite Lerna, jei:

• Jums pirmiausia reikia valdyti ir publikuoti npm paketus.
• Jūsų projektas yra palyginti mažas arba vidutinio dydžio.
• Jūs pageidaujate paprastesnio įrankio su žemesne mokymosi kreive.
• Jūs jau esate susipažinęs su npm ir Yarn.

Pasirinkite Nx, jei:

• Jums reikia optimizuoto kūrimo laiko ir inkrementinių kūrimų.
• Jūs norite kodo generavimo galimybių.
• Jums reikia visapusiškos kūrimo sistemos su užduočių organizavimu.
• Jūsų projektas yra didelis ir sudėtingas.
• Jūs esate pasirengęs investuoti laiko į galingesnio įrankio mokymąsi.

Ar galite naudoti Lerna su Nx?

Taip, Lerna ir Nx gali būti naudojami kartu. Šis derinys leidžia jums pasinaudoti Lerna paketų valdymo galimybėmis, tuo pačiu gaunant naudos iš Nx optimizuotos kūrimo sistemos ir užduočių organizavimo. Nx gali būti sukonfigūruotas kaip Lerna užduočių vykdyklė, suteikianti inkrementinius kūrimus ir skaičiavimų kaupimą Lerna valdomiems paketams.

Geriausia Frontend Monorepo valdymo praktika

Nepriklausomai nuo to, ar pasirinksite Lerna ar Nx, laikytis geriausios praktikos yra labai svarbu sėkmingam frontend monorepo valdymui:

• Nustatykite aiškią projekto struktūrą: Organizuokite savo projektus logiškai ir nuosekliai. Naudokite aiškią paketų ir bibliotekų pavadinimų suteikimo tvarką.
• Užtikrinkite nuoseklius kodavimo standartus: Naudokite linters ir formatuotojus, kad užtikrintumėte nuoseklų kodo stilių visuose projektuose. Tokie įrankiai kaip ESLint ir Prettier gali būti integruoti į jūsų darbo eigą.
• Automatizuokite kūrimo ir testavimo procesus: Naudokite CI/CD vamzdynus, kad automatizuotumėte kūrimo, testavimo ir diegimo procesus. Galima naudoti tokius įrankius kaip Jenkins, CircleCI ir GitHub Actions.
• Įgyvendinkite kodo peržiūras: Atlikite kruopščias kodo peržiūras, kad užtikrintumėte kodo kokybę ir prižiūrimumą. Naudokite traukos užklausas ir kodo peržiūros įrankius.
• Stebėkite kūrimo laiką ir našumą: Stebėkite kūrimo laiką ir našumo metrikas, kad nustatytumėte trukdžius ir tobulintinas sritis. Nx suteikia įrankius kūrimo našumo analizei.
• Dokumentuokite savo Monorepo struktūrą ir procesus: Sukurkite aiškią dokumentaciją, kuri paaiškintų jūsų monorepo struktūrą, naudojamus įrankius ir technologijas bei kūrimo darbo eigas.
• Priimkite įprastus įsipareigojimus: Naudokite įprastus įsipareigojimus, kad automatizuotumėte versijų kūrimo ir išleidimo procesus. Lerna palaiko įprastus įsipareigojimus iš karto.

Išvada

Frontend monorepos siūlo didelių pranašumų valdant didelius ir sudėtingus projektus, įskaitant kodo dalijimąsi, supaprastintą priklausomybių valdymą ir pagerintą bendradarbiavimą. Lerna ir Nx yra galingi įrankiai, kurie gali padėti jums efektyviai valdyti frontend monorepo. Lerna yra puikus pasirinkimas npm paketų valdymui, o Nx suteikia išsamesnę kūrimo sistemą su pažangiomis funkcijomis, tokiomis kaip inkrementiniai kūrimai ir kodo generavimas. Kruopščiai apsvarstę savo projekto poreikius ir laikydamiesi geriausios praktikos, galite sėkmingai įsidiegti frontend monorepo ir gauti naudos.

Nepamirškite atsižvelgti į tokius veiksnius kaip jūsų komandos patirtis, projekto sudėtingumas ir našumo reikalavimai renkantis tarp Lerna ir Nx. Eksperimentuokite su abiem įrankiais ir raskite tą, kuris geriausiai atitinka jūsų konkrečius poreikius.

Sėkmės jūsų monorepo kelionėje!