Frontend Academy · Lektion

Monorepo-konfiguration med Turborepo

Organisera flera appar och delade paket i ett enda repo, definiera en Turbo-pipeline och cacha byggen så att endast ändrade delar byggs om.

Lektion 2 av 414 steg

Monorepo-konfiguration med Turborepo är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 2 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 Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Vad är ett monorepo?

Ett enda Git-repository som innehåller flera projekt (appar och bibliotek) som delar kod. Exempel: webbapp + mobilapp + gemensamt UI-bibliotek + gemensamma verktyg i ett och samma repository. Det förenklar koddelning och atomära ändringar som spänner över flera delar samt ger en enda CI-pipeline.

Varför Turborepo?

Turborepo är ett högpresterande byggsystem för JavaScript-monorepon. Det cachelagrar resultat från uppgifter, kör paket parallellt och bygger bara om det som har ändrats. Det har utvecklats av Vercel.

Konfigurera Turborepo

Använd den officiella startmallen.

npx create-turbo@latest my-monorepo
cd my-monorepo

# Structure:
# apps/
#   web/        (Next.js app)
#   docs/       (another Next.js app)
# packages/
#   ui/         (shared component library)
#   eslint-config/
#   tsconfig/

package.json med workspaces

Rootens package.json deklarerar workspaces — npm/yarn/pnpm skapar symboliska länkar till dem så att appar kan importera paket med namn.

{
  "name": "my-monorepo",
  "private": true,
  "workspaces": ["apps/*", "packages/*"],
  "devDependencies": {
    "turbo": "latest"
  }
}

turbo.json — pipelinen

Definiera uppgifter (build, lint, test, dev) och deras beroenden mellan paketen.

// turbo.json
{
  "$schema": "https://turbo.build/schema.json",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "dist/**"]
    },
    "lint": {},
    "test": { "dependsOn": ["^build"] },
    "dev": { "cache": false, "persistent": true }
  }
}

Förklaring av dependsOn

^build betyder: innan det här paketet byggs ska alla dess workspace-beroenden byggas. Om app/web alltså är beroende av packages/ui byggs ui först.

Köra uppgifter

Kör en uppgift i hela monorepot. Turbo kör i topologisk ordning och parallellt.

# Build everything:
npx turbo run build

# Build only one app and its deps:
npx turbo run build --filter=web

# Run dev mode (persistent, no cache):
npx turbo run dev

# Lint and test in parallel:
npx turbo run lint test

Cachelagra resultat

Turbo hashar indata (källfiler + beroenden + miljö) och cachelagrar resultaten. Om du kör igen utan ändringar går det omedelbart — Turbo spelar upp det cachelagrade resultatet utan att köra uppgiften på nytt.

Fjärrcache

Skicka cachen till en fjärrcache (Vercel Remote Cache eller en egen driftad lösning) så att CI-maskiner och teammedlemmar kan dela den — den första utvecklaren som bygger betalar kostnaden, medan alla andra får en cacheträff.

npx turbo login
npx turbo link

# In CI:
env:
  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
  TURBO_TEAM: yourteam

Filtrera med --filter

Kör en uppgift endast för paket som matchar filtret.

# Run lint only in packages that changed since main:
npx turbo run lint --filter='[main]'

# Run build for web and everything it depends on:
npx turbo run build --filter=web...

# Run dev for the docs app only:
npx turbo run dev --filter=docs

Interna paket

Paket i packages/ importerar varandra med namn. Referera till dem i dependencies som "@repo/ui": "*" (med pnpm: workspace:*).

// apps/web/package.json
{
  "dependencies": {
    "@repo/ui": "*",
    "@repo/utils": "*"
  }
}

// apps/web/app/page.tsx
import { Button } from '@repo/ui';
import { formatDate } from '@repo/utils';

CI-tips

Använd turbo run build --filter=...[origin/main] i CI för att bara bygga det som har ändrats sedan huvudgrenen. Tillsammans med fjärrcache minskar byggtiden från minuter till sekunder för paket som inte har ändrats.

Snabbtest

Vad betyder posten ^build i en Turbo-uppgifts dependsOn-array?

Besvara frågan i den interaktiva lektionen

Sammanfattning: Turborepo

JavaScript-system för monorepon: strukturen apps/ + packages/ med workspaces. turbo.json definierar uppgifter och dependsOn-relationer. ^build = bygg beroenden först. En hashbaserad lokal cache gör upprepat arbete omedelbart. Fjärrcache delar cacheträffar mellan teamet och CI. --filter riktar sig mot delmängder. Använd ändringar sedan en viss referens för snabb PR-CI.

Gratis att börja

Lär dig HTML 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: 41
Lektioner: 163

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Monorepo-konfiguration med Turborepo” gratis?

Ja – hela texten till ”Monorepo-konfiguration med Turborepo” 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 Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Monorepo-konfiguration med Turborepo”?

Organisera flera appar och delade paket i ett enda repo, definiera en Turbo-pipeline och cacha byggen så att endast ändrade delar byggs om. Ni övar på Frontend 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 Frontend Academy?

Du behöver inga förkunskaper. Utbildningen i Frontend 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 2 av 4.

Hur lång tid tar lektionen ”Monorepo-konfiguration med Turborepo”?

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 Frontend Academy-lektionen?

Ja. Varje Frontend 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

Atomisk design: atomer, molekyler och organismer
Monorepo-konfiguration med Turborepo
Mikrofrontend: Module Federation
Funktionsbaserad mappstruktur

← Tillbaka till Frontend Academy