Konfiguracja monorepo z Turborepo
Zorganizuje Pan/Pani wiele aplikacji i współdzielonych pakietów w jednym repozytorium, zdefiniuje potok Turbo i będzie buforować kompilacje, aby ponownie budować tylko zmienione elementy.
Konfiguracja monorepo z Turborepo to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Czym jest monorepo?
Pojedyncze repozytorium Git zawierające wiele projektów (aplikacji i bibliotek), które współdzielą kod. Przykład: aplikacja webowa, aplikacja mobilna, współdzielona biblioteka UI i współdzielone narzędzia w jednym repozytorium. Ułatwia współdzielenie kodu, atomowe zmiany przekrojowe i korzystanie z jednego potoku CI.
Dlaczego Turborepo?
Turborepo to wysokowydajny system budowania dla monorepo JavaScript. Buforuje wyniki zadań, wykonuje je równolegle w wielu pakietach i przebudowuje tylko to, co się zmieniło. Został stworzony przez Vercel.
Konfigurowanie Turborepo
Należy użyć oficjalnego startera.
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 z workspaces
Główny package.json deklaruje workspaces — npm/yarn/pnpm tworzą dla nich dowiązania symboliczne, dzięki czemu aplikacje mogą importować pakiety po nazwie.
{
"name": "my-monorepo",
"private": true,
"workspaces": ["apps/*", "packages/*"],
"devDependencies": {
"turbo": "latest"
}
}turbo.json — potok
Należy zdefiniować zadania (build, lint, test, dev) oraz ich zależności między pakietami.
// turbo.json
{
"$schema": "https://turbo.build/schema.json",
"tasks": {
"build": {
"dependsOn": ["^build"],
"outputs": [".next/**", "dist/**"]
},
"lint": {},
"test": { "dependsOn": ["^build"] },
"dev": { "cache": false, "persistent": true }
}
}Wyjaśnienie dependsOn
^build oznacza: przed zbudowaniem tego pakietu należy zbudować wszystkie jego zależności workspace. Jeśli więc app/web zależy od packages/ui, ui zostanie zbudowane jako pierwsze.
Uruchamianie zadań
Należy uruchomić zadanie w całym monorepo. Turbo wykonuje je w porządku topologicznym i równolegle.
# 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 testBuforowanie wyników
Turbo tworzy skrót danych wejściowych (plików źródłowych, zależności i środowiska) oraz buforuje wyniki. Ponowne uruchomienie bez zmian jest natychmiastowe — Turbo odtwarza zapisany wynik bez ponownego wykonywania zadania.
Zdalne buforowanie
Należy przesłać bufor do zdalnej lokalizacji (Vercel Remote Cache lub rozwiązania hostowanego samodzielnie), aby komputery CI i członkowie zespołu mogli z niego wspólnie korzystać — pierwszy programista ponosi koszt budowania, a pozostali otrzymują trafienie w buforze.
npx turbo login
npx turbo link
# In CI:
env:
TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
TURBO_TEAM: yourteamFiltrowanie za pomocą --filter
Należy uruchomić zadanie tylko dla pasujących pakietów.
# 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=docsPakiety wewnętrzne
Pakiety w packages/ importują się wzajemnie po nazwie. Należy odwołać się do nich w zależnościach jako "@repo/ui": "*" (w przypadku 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';Wskazówki dotyczące CI
W CI należy użyć turbo run build --filter=...[origin/main], aby zbudować tylko to, co zmieniło się od gałęzi main. W połączeniu ze zdalnym buforem skraca to czas budowania niezmienionych pakietów z minut do sekund.
Szybkie sprawdzenie
Co oznacza wpis ^build w tablicy dependsOn zadania Turbo?
Podsumowanie: Turborepo
System monorepo dla JavaScript: struktura apps/ + packages/ z workspaces. turbo.json definiuje zadania i zależności dependsOn. ^build oznacza wcześniejsze zbudowanie zależności. Lokalny bufor oparty na skrótach sprawia, że powtarzane zadania wykonują się natychmiast. Zdalny bufor współdzieli trafienia między zespołem i CI. --filter pozwala wybrać podzbiór. Do szybkiego CI dla pull requestów należy używać opcji changed-since.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 41
- Lekcje
- 163
Często zadawane pytania
Czy lekcja „Konfiguracja monorepo z Turborepo” jest bezpłatna?
Tak — pełny tekst „Konfiguracja monorepo z Turborepo” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Konfiguracja monorepo z Turborepo”?
Zorganizuje Pan/Pani wiele aplikacji i współdzielonych pakietów w jednym repozytorium, zdefiniuje potok Turbo i będzie buforować kompilacje, aby ponownie budować tylko zmienione elementy. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Konfiguracja monorepo z Turborepo”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Atomic Design: atomy, molekuły i organizmy
- Konfiguracja monorepo z Turborepo
- Mikrofrontendy: Module Federation
- Struktura folderów według funkcji