React Academy · Lektion

Nx Affected-kommandon och cachning

Kör endast tester och byggen som påverkas av en ändring och snabba upp CI med distribuerad cachning i Nx Cloud.

Lektion 3 av 413 steg

Nx Affected-kommandon och cachning är en gratis lektion i React Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.

Begreppet affected

Nx följer beroendegrafen i ditt monorepo. När du ändrar en fil beräknar Nx vilka projekt som är berörda (direkt ändrade eller beroende av ändrade projekt) och kör endast uppgifter för dem.

Köra tester för berörda projekt

Kör endast tester för projekt som berörs av ändringar sedan huvudgrenen.

# Compare to main branch:
npx nx affected --target=test --base=origin/main --head=HEAD

# Shorthand (uses nx.json defaultBase):
npx nx affected --target=test

Bygga berörda projekt

Bygg endast berörda projekt – viktigt i CI för att undvika att bygga om hela monorepot vid varje PR.

npx nx affected --target=build

# With parallel workers:
npx nx affected --target=build --parallel=3

Lintning och E2E för berörda projekt

Tillämpa samma mönster på lintning och E2E-tester.

npx nx affected --target=lint
npx nx affected --target=e2e

Hur Nx avgör vad som påverkas

Nx beräknar hashvärden för alla källfiler, package.json-filer och konfigurationsfiler. Ett projekt är berört om någon av dess egna filer har ändrats eller om något projekt som det importerar från har ändrats.

Lokal beräkningscache

Nx cachelagrar uppgiftsresultat (byggartefakter, testresultat) i .nx/cache. När du kör samma uppgift med oförändrade indata återställs resultatet direkt från cachen – även utdata, inklusive terminalens loggar, spelas upp igen.

# First run (builds):
$ npx nx build web  → Builds in 28s, cached

# Second run (no changes):
$ npx nx build web  → Cache hit! [existing outputs match] 0ms

# Clear cache if needed:
$ npx nx reset

Fjärrcache i Nx Cloud

Nx Cloud delar cachen mellan teammedlemmar och CI. Om en kollega redan har byggt ett projekt med samma indata använder din CI fjärrcachen i stället för att bygga om – även på en ny dator.

# Connect workspace to Nx Cloud:
npx nx connect-to-nx-cloud

# Set CI environment variable:
# NX_CLOUD_ACCESS_TOKEN=<token>

Konfigurera cacheindata

Konfigurera vilka filer som ska vara cacheindata för ett mål i project.json. Undanta filer som inte påverkar byggutdata (t.ex. README och testfixturer) för att maximera antalet cacheträffar.

// project.json
{
  "targets": {
    "build": {
      "inputs": [
        "default",  // source files
        "^default"  // upstream dependency source files
      ],
      "outputs": ["{workspaceRoot}/dist/apps/web"]
    }
  }
}

Uppgiftsdistribution (Nx Agents)

Nx Cloud Agents distribuerar berörda uppgifter över flera CI-datorer parallellt, vilket dramatiskt minskar CI:s körtid för stora monorepon.

Nx Console-tillägget för VS Code

Nx Console-tillägget förser dig med ett grafiskt gränssnitt för att köra Nx-kommandon, visualisera projektgrafen och generera kod – utan att du behöver memorera CLI-flaggor.

Visualisera uppgiftsgrafen

nx graph --task=build visar uppgiftsberoendegrafen, inklusive vilka uppgifter som beror på vilka andra uppgifter – användbart för att förstå byggordningen.

npx nx graph --task=build

Snabb kontroll

Vad avgör om en Nx-uppgift ger en cacheträff?

Besvara frågan i den interaktiva lektionen

Sammanfattning

nx affected --target=X kör endast uppgifter för ändrade projekt och projekt som är beroende av dem. Nx cachelagrar utdata genom att beräkna hashvärden för indata – och spelar upp resultaten direkt. Nx Cloud utökar detta till en delad fjärrcache mellan datorer. Använd --parallel=N för att köra uppgifter samtidigt och få snabbare CI.

Gratis att börja

Lär dig React med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 88
Lektioner: 324

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Nx Affected-kommandon och cachning” gratis?

Ja – hela texten till ”Nx Affected-kommandon och cachning” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Nx Affected-kommandon och cachning”?

Kör endast tester och byggen som påverkas av en ändring och snabba upp CI med distribuerad cachning i Nx Cloud. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig React Academy?

Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Nx Affected-kommandon och cachning”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här React Academy-lektionen?

Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Skapa ett Nx-monorepo med React-appar
Delade bibliotek och interna paket
Nx Affected-kommandon och cachning
Kodgeneratorer och automatisering av workspaces

← Tillbaka till React Academy