Frontend Monorepo: Lerna va Nx ish maydonchasini boshqarish

Frontend dasturlashning doimiy rivojlanib borayotgan dunyosida, katta va murakkab loyihalarni boshqarish sezilarli qiyinchilik tug'dirishi mumkin. An'anaviy ko'p repo o'rnatishlari, izolyatsiyani taklif qilsa-da, kodning takrorlanishiga, bog'liqlikni boshqarish muammolariga va mos bo'lmagan vositalarga olib kelishi mumkin. Aynan shu joyda monorepo arxitekturasi porlaydi. Monorepo - bu ko'pincha o'zaro bog'liq bo'lgan, birgalikda qurilgan va versiyalangan bir nechta loyihalarni o'z ichiga olgan yagona ombor. Bu yondashuv ko'plab afzalliklarni taklif qiladi, ammo monoreponi samarali boshqarish maxsus vositalarni talab qiladi. Ushbu maqola ikkita mashhur yechimni o'rganadi: Lerna va Nx.

Monorepo nima?

Monorepo - bu ko'plab loyihalar uchun kodni o'z ichiga olgan versiya nazorati tizimi ombori. Ushbu loyihalar o'zaro bog'liq yoki butunlay mustaqil bo'lishi mumkin. Asosiysi shundaki, ular bir xil omborni baham ko'radilar. Google, Facebook, Microsoft va Uber kabi kompaniyalar o'zlarining ulkan kod bazalarini boshqarish uchun monorepolardan muvaffaqiyatli foydalanishgan. Google deyarli barcha kodini, jumladan Android, Chrome va Gmail-ni bitta omborda saqlaydi deb o'ylang.

Monoreponing afzalliklari

• Kod ulashish va qayta ishlatish: Murakkab qadoqlash va nashr qilish ish oqimlarisiz loyihalarning o'rtasida kodni osongina ulashing. Xuddi shu ombordagi bir nechta ilovalarga uzluksiz integratsiya qilinadigan dizayn tizimi kutubxonasini tasavvur qiling.
• Soddalashtirilgan bog'liqlikni boshqarish: Barcha loyihalarda izchillikni ta'minlab, bog'liqliklarni bitta joyda boshqaring. Umumiy kutubxona bog'liqligini yangilash, unga bog'liq bo'lgan barcha loyihalarni avtomatik ravishda yangilaydi.
• Atom o'zgarishlari: Izchillikni ta'minlash va sinovni soddalashtirish uchun birgina komitda bir nechta loyihalarni qamrab oladigan o'zgarishlarni kiriting. Misol uchun, frontend va backend-ga ta'sir qiladigan qayta qurish atomli ravishda amalga oshirilishi mumkin.
• Hamkorlikni yaxshilash: Jamoalar bir xil ombordagi turli loyihalarda osongina hamkorlik qilishlari, bilimlarni ulashish va funktsional rivojlanishni rag'batlantirishlari mumkin. Dasturchilar turli jamoalardagi kodni osongina ko'rib chiqishlari va tushunishlari mumkin.
• Izchil vositalar va amaliyotlar: Barcha loyihalarda izchil kodlash standartlari, linting qoidalari va qurilish jarayonlarini ta'minlang. Bu kod sifati va saqlanishini yaxshilaydi.
• Soddalashtirilgan qayta qurish: Katta miqyosdagi qayta qurish loyihalari soddalashtirilgan, chunki barcha tegishli kod bir xil ombor ichida. Avtomatlashtirilgan qayta qurish vositalari butun kod bazasida qo'llanilishi mumkin.

Monoreponing qiyinchiliklari

• Ombor hajmi: Monorepos juda katta bo'lib ketishi mumkin, bu esa nusxalash va indekslash operatsiyalarini sekinlashtirishi mumkin. `git sparse-checkout` va `partial clone` kabi vositalar bu muammoni yumshatishga yordam beradi.
• Qurilish vaqtlari: Butun monoreponi qurish juda ko'p vaqt talab qilishi mumkin, ayniqsa yirik loyihalar uchun. Lerna va Nx kabi vositalar bunga murojaat qilish uchun optimallashtirilgan qurilish jarayonlarini taklif qiladi.
• Kirishni boshqarish: Monoreponing ma'lum qismlariga kirishni cheklash murakkab bo'lishi mumkin. Kirishni boshqarish mexanizmlarini diqqat bilan rejalashtirish va amalga oshirish talab qilinadi.
• Vositachilik murakkabligi: Monoreponi o'rnatish va boshqarish maxsus vositalar va bilimlarni talab qiladi. O'rganish egri chizig'i dastlab tik bo'lishi mumkin.

Lerna: JavaScript loyihalarini monorepo ichida boshqarish

Lerna - bu JavaScript loyihalarini monorepo ichida boshqarish uchun mashhur vositadir. U Git va npm bilan ko'p paketli omborlarni boshqarish atrofidagi ish oqimini optimallashtiradi. U ayniqsa, bog'liqliklarni boshqarish uchun npm yoki Yarn dan foydalanadigan loyihalar uchun mos keladi.

Lernaning asosiy xususiyatlari

• Versiyani boshqarish: Lerna avtomatik ravishda paketlarni oxirgi chiqarilishdan beri kiritilgan o'zgarishlarga asoslangan holda versiyalaydi va nashr qiladi. U keyingi versiya raqamini aniqlash uchun an'anaviy komitlardan foydalanadi.
• Bog'liqlikni boshqarish: Lerna paketlararo bog'liqliklarni boshqaradi, monorepo ichidagi paketlar bir-biriga bog'liq bo'lishini ta'minlaydi. U mahalliy bog'liqliklarni yaratish uchun ramziy ulanishdan foydalanadi.
• Vazifalarni bajarish: Lerna qurish va sinov jarayonlarini tezlashtirib, bir nechta paketlarda buyruqlarni parallel ravishda bajarishi mumkin. U `package.json` da belgilangan skriptlarni bajarishni qo'llab-quvvatlaydi.
• O'zgarishlarni aniqlash: Lerna oxirgi chiqarilishdan beri qaysi paketlar o'zgarganligini aniqlay oladi, bu esa maqsadli qurilish va joylashtirishga imkon beradi.

Lernadan foydalanish misoli

Lernaning ishlatilishini soddalashtirilgan misol bilan ko'rib chiqaylik. Monorepo-da ikkita paket bor deb faraz qilamiz: `package-a` va `package-b`. `package-b` `package-a`-ga bog'liq.

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

1. Lerna-ni boshlang:

lerna init

Bu `lerna.json` ni yaratadi va ildiz `package.json` ni yangilaydi. `lerna.json` fayli Lernaning xatti-harakatlarini sozlaydi.

2. Bog'liqliklarni o'rnating:

npm install
# or
yarn install

Bu har bir paketdagi `package.json` fayllariga asoslangan holda monorepodagi barcha paketlar uchun bog'liqliklarni o'rnatadi.

3. Paketlarda buyruqni bajaring:

lerna run test

Bu mavjud bo'lgan barcha paketlarning `package.json` fayllarida belgilangan `test` skriptini bajaradi.

4. Paketlarni nashr qiling:

lerna publish

Bu buyruq komit tarixini tahlil qiladi, qaysi paketlar o'zgarganligini aniqlaydi, ularning versiyalarini an'anaviy komitlarga asoslanib oshiradi va ularni npm-ga (yoki siz tanlagan reestrga) nashr qiladi.

Lerna konfiguratsiyasi

`lerna.json` fayli Lernaning konfiguratsiyasining asosidir. U sizga Lernaning xatti-harakatlarini sozlashga imkon beradi, masalan:

• `packages`: Monorepo ichidagi paketlarning joylashuvini belgilaydi. Ko'pincha `["packages/*"]` ga o'rnatiladi.
• `version`: Versiyalash strategiyasini belgilaydi. `mustaqil` (har bir paket o'z versiyasiga ega) yoki belgilangan versiya bo'lishi mumkin.
• `command`: `publish` va `run` kabi ma'lum Lerna buyruqlari uchun variantlarni sozlashga imkon beradi.

Misol `lerna.json`:

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

Nx: Aqlli, tez va kengaytiriladigan qurilish tizimi

Nx - bu monorepo boshqaruvi uchun ilg'or xususiyatlarni taqdim etadigan kuchli qurilish tizimi. U qurilish vaqtlarini va ishlab chiquvchilarning mahsuldorligini sezilarli darajada yaxshilash uchun inkremental qurilishga, hisoblash keshlashiga va vazifalarni orkestratsiyasiga qaratilgan. Lerna asosan paketlarni boshqarishga qaratilgan bo'lsa, Nx butun monorepo ish oqimini, shu jumladan kodni yaratish, linting, sinovdan o'tkazish va joylashtirishni boshqarishga yanada keng qamrovli yondashuvni taqdim etadi.

Nx ning asosiy xususiyatlari

• Inkremental qurilmalar: Nx loyihalaringizning bog'liqlik grafigini tahlil qiladi va faqat oxirgi qurilishdan beri o'zgargan loyihalarni qayta quradi. Bu qurilish vaqtini keskin qisqartiradi.
• Hisoblash keshlash: Nx vazifalar natijalarini, masalan, qurilish va sinovlarni keshlaydi, shunda agar kirishlar o'zgarmasa, ulardan qayta foydalanish mumkin. Bu rivojlanish tsikllarini yanada tezlashtiradi.
• Vazifalarni orkestratsiyasi: Nx murakkab qurilish quvurlarini belgilash va ularni samarali bajarishga imkon beradigan kuchli vazifalarni orkestratsiyasi tizimini taqdim etadi.
• Kod yaratish: Nx eng yaxshi amaliyotlar va izchil standartlarga muvofiq, yangi loyihalar, komponentlar va modullarni tezda yaratishga yordam beradigan kod yaratish vositalarini taqdim etadi.
• Plugin ekotizimi: Nx React, Angular, Node.js, NestJS va boshqalar kabi turli xil texnologiyalar va freymvorklarni qo'llab-quvvatlaydigan boy plugin ekotizimiga ega.
• Bog'liqlik grafigini vizualizatsiya qilish: Nx monoreponing bog'liqlik grafigini vizualizatsiya qilib, loyihalar o'rtasidagi munosabatlarni tushunishga va potentsial muammolarni aniqlashga yordam beradi.
• Ta'sirlangan buyruqlar: Nx ma'lum bir o'zgarishdan ta'sirlangan loyihalarda faqat vazifalarni bajarish uchun buyruqlarni taqdim etadi. Bu sizning sa'y-harakatlaringizni e'tiborga muhtoj bo'lgan sohalarga qaratishga imkon beradi.

Nx dan foydalanish misoli

Nx dan foydalanishni soddalashtirilgan misol bilan ko'rib chiqaylik. Biz React ilovasi va Node.js kutubxonasini yaratamiz.

1. Nx CLI-ni global ravishda o'rnating:

npm install -g create-nx-workspace

2. Yangi Nx ish maydonchasini yarating:

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

Bu React ilovasi bilan yangi Nx ish maydonchasini yaratadi. `--preset=react` opsiyasi Nx-ga ish maydonchasini React-ga xos konfiguratsiyalar bilan boshlashni aytadi.

3. Kutubxonani yarating:

nx generate @nrwl/node:library my-library

Bu `my-library` nomli yangi Node.js kutubxonasini yaratadi. Nx avtomatik ravishda kutubxonani va uning bog'liqliklarini sozlaydi.

4. Ilovani qurish:

nx build my-app

Bu React ilovasini quradi. Nx bog'liqlik grafigini tahlil qiladi va faqat kerakli fayllarni qayta quradi.

5. Testlarni bajaring:

nx test my-app

Bu React ilovasi uchun birlik testlarini bajaradi. Nx keyingi testlarni tezlashtirish uchun test natijalarini keshlaydi.

6. Bog'liqlik grafigini ko'rish:

nx graph

Bu monoreponing bog'liqlik grafigini vizualizatsiya qiladigan veb-interfeysni ochadi.

Nx konfiguratsiyasi

Nx ish maydonchasining ildizida joylashgan `nx.json` fayli orqali sozlanadi. Ushbu fayl ish maydonchasidagi loyihalarni, ularning bog'liqliklarini va ularda bajarilishi mumkin bo'lgan vazifalarni belgilaydi.

`nx.json` dagi asosiy konfiguratsiya parametrlariga quyidagilar kiradi:

• `projects`: Ish maydonchasidagi loyihalarni va ularning konfiguratsiyasini, masalan, ularning ildiz katalogi va qurilish maqsadlarini belgilaydi.
• `tasksRunnerOptions`: Vazifalarni bajarish va ularning natijalarini kesh qilish uchun mas'ul bo'lgan vazifa ijrochisining konfiguratsiyasi.
• `affected`: Nx o'zgarishdan qaysi loyihalar ta'sirlanganligini qanday aniqlashini sozlaydi.

Misol `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: Qaysi birini tanlash kerak?

Lerna va Nx ikkalasi ham frontend monorepolarni boshqarish uchun ajoyib vositalardir, ammo ular biroz boshqacha ehtiyojlarni qondiradi. Loyihangiz uchun to'g'ri birini tanlashga yordam beradigan taqqoslash:

Xususiyat	Lerna	Nx
Diqqat	Paket boshqaruvi	Qurilish tizimi va vazifalarni orkestratsiyasi
Inkremental qurilmalar	Cheklangan (tashqi vositalarni talab qiladi)	O'rnatilgan va yuqori darajada optimallashtirilgan
Hisoblash keshlash	Yo'q	Ha
Kod yaratish	Yo'q	Ha
Plugin ekotizimi	Cheklangan	Keng qamrovli
O'rganish egri chizig'i	Pastroq	Yuqoriroq
Murakkablik	Oddiyroq	Murakkabroq
Foydalanish hollari	Asosan npm paketlarini boshqarish va nashr qilishga qaratilgan loyihalar.	Optimallashtirilgan qurilish vaqtlari, kod yaratish va keng qamrovli qurilish tizimini talab qiladigan katta va murakkab loyihalar.

Agar siz quyidagilarni qilsangiz, Lerna-ni tanlang:

• Asosan npm paketlarini boshqarish va nashr qilish kerak.
• Loyihangiz nisbatan kichik o'rtacha o'lchamdagi.
• Siz pastroq o'rganish egri chizig'iga ega bo'lgan soddaroq vositani afzal ko'rasiz.
• Siz allaqachon npm va Yarn bilan tanishsiz.

Agar siz quyidagilarni qilsangiz, Nx-ni tanlang:

• Optimallashtirilgan qurilish vaqtlari va inkremental qurilish kerak.
• Siz kod yaratish qobiliyatini xohlaysiz.
• Sizga vazifalarni orkestratsiyasi bilan keng qamrovli qurilish tizimi kerak.
• Loyihangiz katta va murakkab.
• Siz yanada kuchli vositani o'rganishga vaqt sarflashga tayyorsiz.

Lerna-ni Nx bilan ishlatish mumkinmi?

Ha, Lerna va Nx-ni birgalikda ishlatish mumkin. Bu kombinatsiya Lerna-ning paketlarni boshqarish qobiliyatidan foydalanish va Nx-ning optimallashtirilgan qurilish tizimi va vazifalarni orkestratsiyasidan foydalanish imkonini beradi. Nx Lerna boshqariladigan paketlar uchun inkremental qurilish va hisoblash keshlashini ta'minlab, Lerna uchun vazifani bajaruvchi sifatida sozlangan bo'lishi mumkin.

Frontend Monorepo boshqaruvi bo'yicha eng yaxshi amaliyotlar

Lerna yoki Nx ni tanlashingizdan qat'iy nazar, frontend monoreposini muvaffaqiyatli boshqarish uchun eng yaxshi amaliyotlarga rioya qilish juda muhim:

• Loyiha tuzilishini aniq belgilang: Loyihalaringizni mantiqiy va izchil tarzda tashkil qiling. Paketlar va kutubxonalar uchun aniq nomlash konventsiyasidan foydalaning.
• Izchil kodlash standartlarini belgilang: Barcha loyihalarda izchil kodlash uslubini ta'minlash uchun lintlar va formatlardan foydalaning. ESLint va Prettier kabi vositalar ish oqimingizga integratsiya qilinishi mumkin.
• Qurish va sinov jarayonlarini avtomatlashtiring: Qurish, sinovdan o'tkazish va joylashtirish jarayonlarini avtomatlashtirish uchun CI/CD quvurlaridan foydalaning. Jenkins, CircleCI va GitHub Actions kabi vositalardan foydalanish mumkin.
• Kod ko'rib chiqishlarini amalga oshiring: Kod sifatini va saqlanishini ta'minlash uchun kod ko'rib chiqishini o'tkazing. Pull request-lardan va kod ko'rib chiqish vositalaridan foydalaning.
• Qurilish vaqtlari va ishlashini kuzatib boring: Bo'yinbog'larni va takomillashtirish uchun joylarni aniqlash uchun qurilish vaqtlari va ishlash metrikalarini kuzatib boring. Nx qurilish faoliyatini tahlil qilish uchun vositalarni taqdim etadi.
• Monorepo tuzilishingiz va jarayonlaringizni hujjatlashtiring: Monoreponing tuzilishini, ishlatiladigan vositalar va texnologiyalarni va rivojlanish ish oqimlarini tushuntiradigan aniq hujjatlar yarating.
• An'anaviy komitlarni qabul qiling: Versiyalash va nashr qilish jarayonlarini avtomatlashtirish uchun an'anaviy komitlardan foydalaning. Lerna qutidan tashqari an'anaviy komitlarni qo'llab-quvvatlaydi.

Xulosa

Frontend monorepolari kod ulashish, soddalashtirilgan bog'liqlikni boshqarish va hamkorlikni yaxshilash kabi katta va murakkab loyihalarni boshqarish uchun katta afzalliklarni taklif qiladi. Lerna va Nx frontend monoreponi samarali boshqarishga yordam beradigan kuchli vositalardir. Lerna npm paketlarini boshqarish uchun ajoyib tanlovdir, Nx esa inkremental qurilish va kod yaratish kabi ilg'or xususiyatlarga ega bo'lgan yanada keng qamrovli qurilish tizimini taqdim etadi. Loyihangizning ehtiyojlarini diqqat bilan ko'rib chiqish va eng yaxshi amaliyotlarga amal qilish orqali siz frontend monoreposini muvaffaqiyatli qabul qilishingiz va uning afzalliklaridan bahramand bo'lishingiz mumkin.

Lerna va Nx-ni tanlashda jamoangiz tajribasi, loyihaning murakkabligi va ishlash talablari kabi omillarni hisobga oling. Ikkala vosita bilan ham tajriba qiling va o'ziga xos ehtiyojlaringizga eng mosini toping.

Monorepo sayohatingizda omad!