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

เปลี่ยนเป็น Monorepo เมื่อ Project มีขนาดใหญ่

เมื่อ project มีขนาดใหญ่ มันอาจต้องมีหลายอย่าง เช่น examples, docs, website, cli, tools, packages, etc.

ถ้ามีอะไรเยอะๆอย่างนี้ ควรจะเปลี่ยนจาก Monnolith ซึ่งเป็น project ปกติเริ่มต้นทั่วไปเป็น Monorepo

Turborepo คือ Build System สำหรับ Monorepo

project แบบเดิมคือเราต้อง run dev, run build, run test แต่ละ project

แต่ถ้าใช้ turborepo เรารัน turbo dev, turbo build, turbo test, ... แล้วทุก projects ใน workspace จะถูกรันด้วย

การใช้งาน Turborepo

1. setup file structure เป็นประมาณนี้

my-turborepo/
├── apps/
│   ├── web/            
│   │   ├── package.json
│   │   └── ...
│   └── docs/            
│       ├── package.json
│       └── ...
├── packages/
│   ├── ui/              
│   │   ├── package.json
│   │   └── ...
│   └── utils/           
│       ├── package.json
│       └── ...
├── package.json        
├── turbo.json          
└── pnpm-workspace.yaml

2. ต้องกำหนด workspace ที่จะใช้

ถ้า pnpm กำหนดที่ pnpm-workspace.yaml

packages:
  - "packages/*"
  - "apps/*"

3. ต้องกำหนด turbo.json

ต้องการกำหนด tasks ที่จะ runตรงกับทุก script ใน package.json ของแต่ละ project

{
	"ui": "stream",
	"$schema": "https://turbo.build/schema.json",
	"remoteCache": {
		"signature": true
	},
	"tasks": {
		"build": {
			"dependsOn": ["^build", "type-check"],
			"outputs": ["dist/**", "build/**", "*.tsbuildinfo"],
			"cache": true
		},
		"type-check": {
			"dependsOn": ["^build"],
			"outputs": [],
			"cache": true
		},
		"test": {
			"dependsOn": ["^build"],
			"outputs": [],
			"cache": true
		},
		"lint": {
			"dependsOn": ["^build"],
			"outputs": [],
			"cache": true
		},
		"dev": {
			"dependsOn": ["build"],
			"cache": false
		},
		"clean": {
			"outputs": ["dist", "build", "*.tsbuildinfo"]
		}
	}
}

4. กำหนด turbo ที่ package.json ที่ root และตรงตรงกันกับ package.json ที่แต่ละ project

package.json

{
	"scripts": {
		"build": "turbo build",
		"test": "turbo test",
		"lint": "turbo lint",
		"dev": "turbo dev",
		"clean": "turbo clean"
	}
}

apps/web/package.json

{
	"scripts": {
		"build": "pnpm run build",
		"test": "pnpm run test",
		"lint": "pnpm run lint",
		"dev": "pnpm run dev",
		"clean": "pnpm run clean"
	}
}

apps/docs/package.json

{
	"scripts": {
		"build": "pnpm run build",
		"test": "pnpm run test",
		"lint": "pnpm run lint",
		"dev": "pnpm run dev",
		"clean": "pnpm run clean"
	}
}

5. run task

package.json

{
	"scripts": {
		"build": "turbo build",
		"test": "turbo test",
		"lint": "turbo lint",
		"dev": "turbo dev",
		"clean": "turbo clean"
	}
}

Terminal

turbo dev

Terminal

turbo build

Terminal

turbo lint