Frontend Nx Workspace: Monorepo fejlesztés a méretezhető alkalmazásokhoz

A mai rohanó szoftverfejlesztési környezetben nagyméretű frontend alkalmazások építése és karbantartása kihívást jelenthet. A függőségek kezelése, a kódkonzisztencia biztosítása és a buildelési idők optimalizálása egyre összetettebbé válik a projektek növekedésével. A Monorepos hatékony megoldást kínál azáltal, hogy több projektet és könyvtárat egyetlen tárolóban konszolidál. Az Nx, egy intelligens, bővíthető build rendszer, fejlett eszközökkel és funkciókkal javítja a monorepo fejlesztést.

Ez az átfogó útmutató az Nx workspace használatának előnyeit vizsgálja a frontend monorepo fejlesztéshez, kulcsfontosságú fogalmakat, gyakorlati példákat és bevált gyakorlatokat fed le.

Mi az a Monorepo?

A monorepo egy szoftverfejlesztési stratégia, ahol az összes projekt és azok függőségei egyetlen tárolóban tárolódnak. Ez a megközelítés ellentétes a hagyományos multi-repo megközelítéssel, ahol minden projektnek saját tárolója van.

A Monorepo főbb jellemzői:

• Az igazság egyetlen forrása: Minden kód egy helyen található.
• Kódmegosztás és -újrafelhasználás: Könnyebb a kód megosztása és újrafelhasználása a projektek között.
• Egyszerűsített függőségkezelés: A függőségek kezelése a projektek között egyszerűbbé válik.
• Atomikus változások: A változások több projektet is átfoghatnak, biztosítva a konzisztenciát.
• Javított együttműködés: Könnyebb a csapatok számára az összefüggő projekteken való együttműködés.

Miért érdemes Monorepót használni a Frontend Fejlesztéshez?

A Monorepos jelentős előnyöket kínál a frontend fejlesztéshez, különösen a nagyméretű és összetett projektek esetében.

• Továbbfejlesztett kódmegosztás: A frontend projektek gyakran osztanak meg közös UI komponenseket, segédfunkciókat és tervezési rendszereket. A monorepo megkönnyíti a kódmegosztást, csökkenti a duplikációt és elősegíti a konzisztenciát. Például egy tervezési rendszer könyvtár könnyen megosztható több React alkalmazás között ugyanazon a munkaterületen.
• Egyszerűsített függőségkezelés: A függőségek kezelése több frontend projekt között kihívást jelenthet, különösen a folyamatosan fejlődő JavaScript ökoszisztémában. A monorepo egyszerűsíti a függőségkezelést a függőségek központosításával, valamint a verziók és frissítések kezeléséhez szükséges eszközökkel.
• Javított build teljesítmény: Az Nx fejlett build gyorsítótárazást és függőség-elemzést biztosít, lehetővé téve a gyorsabb és hatékonyabb buildelést. A függőségi gráf elemzésével az Nx csak a változás által érintett projekteket tudja újraépíteni, jelentősen csökkentve a buildelési időt. Ez kulcsfontosságú a nagyméretű frontend alkalmazások esetében, amelyek számos komponenst és modult tartalmaznak.
• Egyszerűsített refaktorálás: A kód refaktorálása több projektben egyszerűbb a monorepóban. A változtatások atomikusan elvégezhetők, biztosítva a konzisztenciát és csökkentve a hibák bevezetésének kockázatát. Például egy több alkalmazásban használt komponens átnevezése egyetlen committal elvégezhető.
• Jobb együttműködés: A monorepo jobb együttműködést tesz lehetővé a frontend fejlesztők között azáltal, hogy közös kódbázist és közös fejlesztői környezetet biztosít. A csapatok könnyen hozzájárulhatnak különböző projektekhez, valamint megoszthatják a tudást és a bevált gyakorlatokat.

Az Nx bemutatása: Az intelligens, bővíthető build rendszer

Az Nx egy hatékony build rendszer, amely fejlett eszközökkel és funkciókkal javítja a monorepo fejlesztést. Szabványosított fejlesztési élményt nyújt, javítja a build teljesítményt és egyszerűsíti a függőségkezelést.

Az Nx főbb jellemzői:

• Intelligens build rendszer: Az Nx elemzi a projektek függőségi gráfját, és csak az érintett projekteket építi újra, jelentősen csökkentve a buildelési időt.
• Kódgenerálás: Az Nx kódgeneráló eszközöket biztosít új projektek, komponensek és modulok létrehozásához, felgyorsítva a fejlesztést és biztosítva a konzisztenciát.
• Integrált eszközök: Az Nx integrálható a népszerű frontend keretrendszerekkel, mint például a React, az Angular és a Vue.js, zökkenőmentes fejlesztési élményt nyújtva.
• Plugin ökoszisztéma: Az Nx gazdag plugin ökoszisztémával rendelkezik, amely további eszközökkel és integrációkkal bővíti a funkcionalitását.
• Inkrementális buildek: Az Nx inkrementális build rendszere csak a megváltozott dolgokat építi újra, drasztikusan felgyorsítva a fejlesztési visszacsatolási hurkot.
• Számítás gyorsítótárazás: Az Nx gyorsítótárazza a drága számítások, például a buildek és a tesztek eredményeit, tovább javítva a teljesítményt.
• Elosztott feladat végrehajtás: Nagyon nagy monorepok esetén az Nx a feladatokat több gépen oszthatja el, hogy párhuzamosítsa a buildeket és a teszteket.

Nx munkaterület beállítása a frontend fejlesztéshez

Az Nx munkaterület beállítása egyszerű. Az Nx CLI segítségével új munkaterületet hozhat létre, és projekteket és könyvtárakat adhat hozzá.

Előfeltételek:

• Node.js (16-os vagy újabb verzió)
• npm vagy yarn

Lépések:

1. Telepítse az Nx CLI-t:

               npm install -g create-nx-workspace
               
   
                 
                   Copy
                 
               
             

2. Hozzon létre egy új Nx munkaterületet:

               npx create-nx-workspace my-frontend-workspace
               
   
                 
                   Copy
                 
               
             

   A rendszer felszólítja, hogy válasszon egy beállítást. Válasszon egy olyan beállítást, amely megfelel az Ön preferált frontend keretrendszerének (pl. React, Angular, Vue.js).

3. Adjon hozzá egy új alkalmazást:

               nx generate @nx/react:application my-app
               
   
                 
                   Copy
                 
               
             

   Ez a parancs létrehoz egy új React alkalmazást "my-app" néven a munkaterületen belül.

4. Adjon hozzá egy új könyvtárat:

               nx generate @nx/react:library my-library
               
   
                 
                   Copy
                 
               
             

   Ez a parancs létrehoz egy új React könyvtárat "my-library" néven a munkaterületen belül. A könyvtárak a kód megosztására szolgálnak az alkalmazások között.

Nx munkaterületének szervezése

A jól szervezett Nx munkaterület elengedhetetlen a karbantarthatósághoz és a méretezhetőséghez. Vegye figyelembe a következő iránymutatásokat a munkaterület felépítésekor:

• Alkalmazások: Az alkalmazások a frontend projektek belépési pontjai. Ezek a felhasználó felé irányuló felületeket képviselik. Ilyenek például a webalkalmazás, a mobilalkalmazás vagy az asztali alkalmazás.
• Könyvtárak: A könyvtárak újrafelhasználható kódot tartalmaznak, amely megosztható több alkalmazás között. Különböző típusokba vannak szervezve a funkcionalitásuk alapján.
• Funkciókönyvtárak: A funkciókönyvtárak egy adott funkció üzleti logikáját és UI komponenseit tartalmazzák. A mag és UI könyvtáraktól függenek.
• UI könyvtárak: Az UI könyvtárak újrafelhasználható UI komponenseket tartalmaznak, amelyek több funkcióban és alkalmazásban is használhatók.
• Core könyvtárak: A core könyvtárak segédfunkciókat, adatmodelleket és egyéb közös kódot tartalmaznak, amelyet a munkaterületen használnak.
• Megosztott könyvtárak: A megosztott könyvtárak keretrendszer-független kódot tartalmaznak, amelyet több alkalmazás és könyvtár használhat, függetlenül a frontend keretrendszertől (React, Angular, Vue.js). Ez elősegíti a kód újrafelhasználását és csökkenti a duplikációt.

Példa a könyvtárszerkezetre:

my-frontend-workspace/
├── apps/
│   ├── my-app/
│   │   ├── src/
│   │   │   ├── app/
│   │   │   │   ├── app.tsx
│   │   │   │   └── app.module.css
│   │   │   └── main.tsx
│   │   └── project.json
│   └── my-other-app/
│       └── ...
├── libs/
│   ├── feature-my-feature/
│   │   ├── src/
│   │   │   └── lib/
│   │   │       └── feature-my-feature.tsx
│   │   └── project.json
│   ├── ui/
│   │   ├── src/
│   │   │   └── lib/
│   │   │       └── button/
│   │   │           └── button.tsx
│   │   └── project.json
│   ├── core/
│   │   ├── src/
│   │   │   └── lib/
│   │   │       └── api.ts
│   │   └── project.json
│   └── shared/
│       ├── src/
│       │   └── lib/
│       │       └── date-formatter.ts
│       └── project.json
├── tools/
│   └── generators/
├── nx.json
├── package.json
└── tsconfig.base.json

Kódmegosztás és -újrafelhasználás Nx könyvtárakkal

Az Nx könyvtárak a kódmegosztás és az újrafelhasználás kulcsa a monorepóban. A kód rendezett könyvtárakba történő rendezésével könnyedén megoszthat komponenseket, szolgáltatásokat és segédprogramokat több alkalmazás között.

Példa: UI komponens megosztása

Tegyük fel, hogy van egy gomb komponense, amelyet több React alkalmazás között szeretne megosztani. Létrehozhat egy "ui" nevű UI könyvtárat, és ebbe a könyvtárba helyezheti a gomb komponenst.

1. Hozzon létre egy UI könyvtárat:

               nx generate @nx/react:library ui
               
   
                 
                   Copy
                 
               
             

2. Hozzon létre egy gomb komponenst:

               nx generate @nx/react:component button --project=ui
               
   
                 
                   Copy
                 
               
             

3. Implementálja a gomb komponenst:

               // libs/ui/src/lib/button/button.tsx
   import styles from './button.module.css';
   
   interface ButtonProps {
    text: string;
    onClick: () => void;
   }
   
   export function Button({ text, onClick }: ButtonProps) {
    return (
    
    {text}
    
    );
   }
   
   export default Button;
               
   
                 
                   Copy
                 
               
             

4. Exportálja a gomb komponenst a könyvtárból:

               // libs/ui/src/index.ts
   export * from './lib/button/button';
               
   
                 
                   Copy
                 
               
             

5. Használja a gomb komponenst egy alkalmazásban:

               // apps/my-app/src/app/app.tsx
   import { Button } from '@my-frontend-workspace/ui';
   
   function App() {
    return (
    
   
    
   Welcome to My App
     alert('Clicked!')} />
    
    );
   }
   
   export default App;
               
   
                 
                   Copy
                 
               
             

A könyvtárak használatával biztosíthatja, hogy a UI komponensei konzisztensek legyenek az összes alkalmazásban. Amikor frissíti a gomb komponenst az UI könyvtárban, az összes olyan alkalmazás, amely a komponenst használja, automatikusan frissül.

Függőségkezelés az Nx munkaterületeken

Az Nx hatékony eszközöket biztosít a projektek és könyvtárak közötti függőségek kezeléséhez. A függőségeket explicit módon definiálhatja az egyes projektek vagy könyvtárak `project.json` fájljában.

Példa: Függőség deklarálása

Tegyük fel, hogy az Ön "my-app" alkalmazása a "core" könyvtártól függ. Ezt a függőséget deklarálhatja a "my-app" `project.json` fájljában.

            // apps/my-app/project.json
{
 "name": "my-app",
 "projectType": "application",
 ...
 "implicitDependencies": ["core"]
}
            

              
                Copy
              
            
          

A függőségek explicit deklarálásával az Nx elemzi a munkaterület függőségi gráfját, és csak az érintett projekteket építi újra, amikor egy függőség megváltozik. Ez jelentősen javítja a build teljesítményt.

Build teljesítmény optimalizálása az Nx-szel

Az Nx intelligens build rendszere és a számítási gyorsítótárazási képességei jelentősen javítják a build teljesítményt. Íme néhány tipp a build teljesítmény optimalizálásához az Nx munkaterületén:

• Elemezze a függőségi gráfot: Az `nx graph` parancs segítségével vizualizálhatja a munkaterület függőségi gráfját. Azonosítsa a potenciális szűk keresztmetszeteket, és optimalizálja a projektstruktúrát a függőségek csökkentése érdekében.
• Használja a számítás gyorsítótárazást: Az Nx gyorsítótárazza a drága számítások, például a buildek és a tesztek eredményeit. Győződjön meg arról, hogy a számítás gyorsítótárazása engedélyezve van az `nx.json` fájlban.
• Futtasson feladatokat párhuzamosan: Az Nx párhuzamosan tudja futtatni a feladatokat, hogy kihasználja a több CPU-magot. Használja a `--parallel` zászlót a feladatok párhuzamos futtatásához.
• Használja az elosztott feladat végrehajtást: Nagyon nagy monorepok esetén az Nx a feladatokat több gépen oszthatja el a buildek és tesztek párhuzamosításához.
• Optimalizálja a kódot: Optimalizálja a kódot a buildelési idők csökkentése érdekében. Távolítsa el a nem használt kódot, optimalizálja a képeket, és használjon kód felosztást a kötegek méretének csökkentéséhez.

Tesztelés az Nx munkaterületeken

Az Nx integrált tesztelő eszközöket biztosít az egységtesztek, integrációs tesztek és végponttól végpontig tartó tesztek futtatásához. Az `nx test` parancs segítségével futtathat teszteket a munkaterületen lévő összes projekthez vagy egy adott projekthez.

Példa: Tesztek futtatása

            nx test my-app
            

              
                Copy
              
            
          

Ez a parancs futtatja a "my-app" alkalmazás összes tesztjét.

Az Nx támogatja a népszerű tesztelési keretrendszereket, mint például a Jest, a Cypress és a Playwright. A tesztelési környezetet az egyes projektek `project.json` fájljában konfigurálhatja.

Folyamatos integráció és folyamatos telepítés (CI/CD) az Nx-szel

Az Nx zökkenőmentesen integrálódik a népszerű CI/CD rendszerekkel, mint például a GitHub Actions, a GitLab CI és a Jenkins. Az Nx parancssori felületével automatizálhatja a buildeket, a teszteket és a telepítéseket a CI/CD csatornájában.

Példa: GitHub Actions munkafolyamat

Íme egy példa a GitHub Actions munkafolyamatra, amely buildeli, teszteli és telepíti az Nx munkaterületét:

            # .github/workflows/ci.yml
name: CI

on:
 push:
 branches: [main]
 pull_request:
 branches: [main]

jobs:
 build:
 runs-on: ubuntu-latest

 steps:
 - uses: actions/checkout@v3
 with:
 fetch-depth: 0
 - uses: actions/setup-node@v3
 with:
 node-version: 16
 cache: 'npm'
 - run: npm ci
 - run: npx nx affected --target=lint --base=origin/main --head=HEAD
 - run: npx nx affected --target=test --base=origin/main --head=HEAD --watchAll=false
 - run: npx nx affected --target=build --base=origin/main --head=HEAD
            

              
                Copy
              
            
          

Ez a munkafolyamat a következő feladatokat futtatja:

• Lintelés: Futtatja a linteket az érintett projekteken.
• Tesztelés: Futtatja a teszteket az érintett projekteken.
• Buildelés: Buildeli az érintett projekteket.

Az Nx biztosítja az `affected` parancsot, amely lehetővé teszi, hogy csak azokat a projekteket futtassa, amelyeket a változás érintett. Ez jelentősen csökkenti a CI/CD csatorna végrehajtási idejét.

Frontend Nx munkaterület fejlesztésének bevált gyakorlatai

Íme néhány bevált gyakorlat a frontend alkalmazások fejlesztéséhez az Nx-szel:

• Konzisztens kódolási stílust kövessen: Használjon kódformázót, mint például a Prettier, és lintert, mint például az ESLint, hogy konzisztens kódolási stílust kényszerítsen ki a munkaterületén.
• Írjon egységteszteket: Írjon egységteszteket az összes komponenséhez, szolgáltatásához és segédprogramjához a kód minőségének biztosítása és a regressziók megelőzése érdekében.
• Használjon tervezési rendszert: Használjon tervezési rendszert a UI komponensek közötti konzisztencia biztosításához.
• Dokumentálja a kódját: Dokumentálja alaposan a kódját, hogy a többi fejlesztő számára könnyebben érthető és karbantartható legyen.
• Használjon verziókezelést: Használjon Gitet a verziókezeléshez, és kövessen konzisztens elágazási stratégiát.
• Automatizálja a munkafolyamatát: Automatizálja a munkafolyamatát a CI/CD-vel, hogy biztosítsa a kódjának mindig automatikus tesztelését és telepítését.
• Tartsa naprakészen a függőségeket: Rendszeresen frissítse a függőségeit, hogy részesüljön a legújabb funkciókban és biztonsági javításokban.
• Figyelje a teljesítményt: Figyelje alkalmazásai teljesítményét, és azonosítsa a potenciális szűk keresztmetszeteket.

Haladó Nx fogalmak

Ha már kényelmesen érzi magát az Nx alapjaival, akkor felfedezhet néhány haladó fogalmat a fejlesztési munkafolyamatának további javítása érdekében:

• Egyéni generátorok: Hozzon létre egyéni generátorokat új projektek, komponensek és modulok létrehozásának automatizálásához. Ez jelentősen csökkentheti a fejlesztési időt, és biztosíthatja a konzisztenciát.
• Nx Pluginok: Fejlesszen Nx pluginokat az Nx funkcionalitásának kibővítéséhez egyéni eszközökkel és integrációkkal.
• Modul Szövetség: A modul szövetséggel külön-külön építheti és telepítheti alkalmazásának független részeit. Ez gyorsabb telepítéseket és nagyobb rugalmasságot tesz lehetővé.
• Nx Cloud: Integráljon az Nx Cloud-dal, hogy fejlett build betekintést, elosztott feladat végrehajtást és távoli gyorsítótárazást kapjon.

Következtetés

Az Nx munkaterületek hatékony és eredményes módot kínálnak a frontend monorepók kezeléséhez. Az Nx fejlett eszközeinek és funkcióinak kihasználásával javíthatja a kódmegosztást, a build teljesítményt és a fejlesztők együttműködését, ami méretezhető és karbantartható frontend alkalmazásokat eredményez. Az Nx átvétele egyszerűsítheti a fejlesztési folyamatot, és jelentős termelékenységnövekedést eredményezhet a csapat számára, különösen összetett és nagyméretű projektek esetén. Ahogy a frontend környezet folyamatosan fejlődik, a monorepo fejlesztés elsajátítása az Nx-szel egyre értékesebb készséggé válik a frontend mérnökök számára.

Ez az útmutató átfogó áttekintést nyújtott a frontend Nx munkaterület fejlesztéséről. A bevált gyakorlatok követésével és a haladó fogalmak felfedezésével felszabadíthatja az Nx teljes potenciálját, és csodálatos frontend alkalmazásokat építhet.