Frontend Academy · บทเรียน

การตั้งค่าโมโนรีโพด้วย Turborepo

จัดระเบียบหลายแอปและแพ็กเกจที่ใช้ร่วมกันไว้ในรีโพเดียว กำหนดไปป์ไลน์ของ Turbo และแคชการบิลด์เพื่อบิลด์ใหม่เฉพาะส่วนที่เปลี่ยนแปลง

การตั้งค่าโมโนรีโพด้วย Turborepo เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

โมโนรีโปคืออะไร

พื้นที่เก็บ Git เดียวที่รองรับหลายโครงการ (แอปและไลบรารี) ซึ่งใช้โค้ดร่วมกัน เช่น เว็บแอป + แอปมือถือ + ไลบรารี UI ร่วมกัน + ยูทิลิตีร่วมกันในรีโปเดียว ช่วยให้แชร์โค้ดได้ง่าย ทำการเปลี่ยนแปลงข้ามส่วนต่าง ๆ ได้เป็นชุดเดียว และมี CI pipeline เดียว

ทำไมต้องใช้ Turborepo

Turborepo คือระบบบิลด์ประสิทธิภาพสูงสำหรับโมโนรีโป JavaScript ระบบจะแคชผลลัพธ์ของงาน ทำงานแบบขนานข้ามแพ็กเกจ และบิลด์ใหม่เฉพาะส่วนที่เปลี่ยนแปลงเท่านั้น พัฒนาโดย Vercel

การตั้งค่า Turborepo

ใช้สตาร์เตอร์อย่างเป็นทางการ

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 พร้อม Workspaces

package.json ที่รูทจะประกาศ workspaces จากนั้น npm/yarn/pnpm จะสร้าง symlink ให้ เพื่อให้แอปสามารถนำเข้าแพ็กเกจด้วยชื่อแพ็กเกจได้

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

turbo.json — กระบวนการทำงาน

กำหนดงานต่าง ๆ (build, lint, test, dev) และการขึ้นต่อกันระหว่างแพ็กเกจ

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

อธิบาย dependsOn

^build หมายความว่า ก่อนบิลด์แพ็กเกจนี้ ให้บิลด์แพ็กเกจที่เป็น workspace dependency ทั้งหมดก่อน ดังนั้น หาก app/web ขึ้นต่อกับ packages/ui ก็ต้องบิลด์ ui ก่อน

การเรียกใช้งานต่าง ๆ

เรียกใช้งานหนึ่งงานทั่วทั้งโมโนรีโป Turbo จะทำงานตามลำดับโทโพโลยีโดยใช้การทำงานแบบขนาน

# 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

การแคชผลลัพธ์

Turbo จะสร้างแฮชจากข้อมูลเข้า (ไฟล์ต้นฉบับ + การขึ้นต่อกัน + สภาพแวดล้อม) แล้วแคชผลลัพธ์ไว้ การเรียกใช้งานซ้ำโดยไม่มีการเปลี่ยนแปลงจะเสร็จทันที เพราะ Turbo นำผลลัพธ์ที่แคชไว้มาทำซ้ำโดยไม่ต้องทำงานใหม่

การแคชระยะไกล

ส่งแคชไปยังพื้นที่ระยะไกล (Vercel Remote Cache หรือเซิร์ฟเวอร์ที่โฮสต์เอง) เพื่อให้เครื่อง CI และเพื่อนร่วมทีมใช้แคชร่วมกันได้ นักพัฒนาคนแรกที่บิลด์จะเป็นผู้รับภาระเวลาและทรัพยากร ส่วนคนอื่น ๆ จะได้รับผลลัพธ์จากแคช

npx turbo login
npx turbo link

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

การกรองด้วย --filter

เรียกใช้งานเฉพาะแพ็กเกจที่ตรงตามเงื่อนไข

# 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

แพ็กเกจภายใน

แพ็กเกจใน packages/ สามารถนำเข้ากันเองด้วยชื่อแพ็กเกจ อ้างอิงแพ็กเกจเหล่านี้ใน dependencies เป็น "@repo/ui": "*" (สำหรับ 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

ใช้ turbo run build --filter=...[origin/main] ใน CI เพื่อบิลด์เฉพาะส่วนที่เปลี่ยนแปลงนับจากสาขา main เมื่อใช้ร่วมกับแคชระยะไกล เวลาในการบิลด์แพ็กเกจที่ไม่มีการเปลี่ยนแปลงจะลดลงจากหลายนาทีเหลือเพียงไม่กี่วินาที

ตรวจสอบความเข้าใจ

รายการ ^build ในอาร์เรย์ dependsOn ของงาน Turbo หมายความว่าอย่างไร

สรุป: Turborepo

ระบบโมโนรีโป JavaScript ที่มีโครงสร้าง apps/ + packages/ และใช้ workspaces โดย turbo.json จะกำหนดงานและความสัมพันธ์ใน dependsOn ^build หมายถึงให้บิลด์แพ็กเกจที่ขึ้นต่อกันก่อน แคชภายในเครื่องที่อิงตามแฮชช่วยให้งานซ้ำเสร็จทันที แคชระยะไกลช่วยแชร์ผลลัพธ์จากแคชระหว่างทีมและ CI --filter ใช้เลือกชุดย่อย ใช้การกรองตามส่วนที่เปลี่ยนแปลงเพื่อให้ CI ของ PR ทำงานได้รวดเร็ว

คำถามที่พบบ่อย

บทเรียน “การตั้งค่าโมโนรีโพด้วย Turborepo” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การตั้งค่าโมโนรีโพด้วย Turborepo” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การตั้งค่าโมโนรีโพด้วย Turborepo”

จัดระเบียบหลายแอปและแพ็กเกจที่ใช้ร่วมกันไว้ในรีโพเดียว กำหนดไปป์ไลน์ของ Turbo และแคชการบิลด์เพื่อบิลด์ใหม่เฉพาะส่วนที่เปลี่ยนแปลง คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “การตั้งค่าโมโนรีโพด้วย Turborepo” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

การออกแบบแบบอะตอมิก: อะตอม โมเลกุล ออร์แกนิซึม
การตั้งค่าโมโนรีโพด้วย Turborepo
ไมโครฟรอนต์เอนด์: Module Federation
โครงสร้างโฟลเดอร์ตามฟีเจอร์

← กลับไปที่ Frontend Academy