Tooling, Integrations & Production

อะไรบ้างที่อยู่รอบ ๆ component

คุณได้เรียนแล้วว่า Astro render หน้าและ hydrate island ยังไง โมดูลนี้คือเครื่องมือที่ล้อมรอบสิ่งเหล่านั้น: config ที่ต่อทุกอย่างเข้าด้วยกัน, integrations ที่เพิ่มความสามารถ, TypeScript ที่คอยกันพลาด, test ที่พิสูจน์ว่าทำงาน และ build ที่ส่งงานขึ้น production

ไม่มีอะไรแปลกใหม่ — Astro วางอยู่บน Vite ดังนั้นส่วนใหญ่เป็นเครื่องมือที่คุ้นเคยพร้อมชั้น Astro บาง ๆ เป้าหมายตรงนี้คือรู้ว่าปุ่มไหนทำอะไร

โมดูลนี้ครอบคลุมอะไร

บทเรียน	สิ่งที่จะได้เรียน
Config & integrations	`astro.config.mjs`, ระบบ integrations และ Vite ที่อยู่ข้างใต้
TypeScript & content types	type ของ props และ locals และ type ที่ generate จาก content schema
Testing & tooling	Vitest, Container API, Playwright และ Dev Toolbar
Deployment & ecosystem	deploy แบบ static vs on-demand และ ecosystem ของ Astro

pipeline จาก source ไปเป็นเว็บ

flowchart LR
  config["astro.config.mjs
(integrations, adapter)"] --> build["astro check + astro build"]
  src["src/ (pages, components, content)"] --> build
  build --> dist["dist/ (HTML, assets, server entry)"]
  dist --> deploy["deploy: static CDN หรือ adapter runtime"]

จากโปรเจกต์ไปสู่เว็บที่ deploy แล้ว

ทุกอย่างไหลผ่าน config และ build ทำความคุ้นเคยกับสองอย่างนี้ ที่เหลือคือรายละเอียด

Astro วางอยู่บน build tool ตัวไหน? Webpack Vite Rollup อย่างเดียว esbuild อย่างเดียว

integrations และ adapter ของโปรเจกต์ตั้งค่าที่ไหน? ใน package.json ใน astro.config.mjs ใน frontmatter ของแต่ละหน้า ใน .env file