Vite คืออะไร? คู่มือภาษาเข้าใจง่ายสำหรับคนสร้างแอป

Vite (อ่านว่า "วีท" ซึ่งเป็นคำภาษาฝรั่งเศสที่แปลว่า "เร็ว") คือเครื่องมือ build สำหรับเว็บไซต์และเว็บแอป ขณะที่คุณกำลังสร้าง มันรันเซิร์ฟเวอร์พัฒนาที่แสดงการเปลี่ยนแปลงของคุณในเบราว์เซอร์แทบทันที เมื่อพร้อมเปิดใช้งาน มันจะแพ็กโค้ดของคุณเป็นไฟล์เล็กที่ปรับให้เหมาะแล้ว ซึ่งโฮสต์เว็บใดก็เสิร์ฟได้ เป็นเครื่องมือฟรี โอเพนซอร์ส และเป็นฐานของโปรเจกต์ React, Vue และ Svelte จำนวนมาก

ทำไม Vite จึงสำคัญเมื่อสร้างด้วย AI

คุณอาจไม่เคยพิมพ์คำสั่ง Vite เลย แต่ถ้าแอปของคุณสร้างด้วย AI app builder มีโอกาสสูงที่ Vite กำลังรันอยู่ Mythex เริ่มโปรเจกต์ใหม่บน Vite + React + TypeScript + Tailwind เว้นแต่คุณจะขอสิ่งอื่น (ดูว่าเทคโนโลยีถูกเลือกอย่างไร)

การรู้ว่า Vite ทำอะไรช่วยให้คุณ:

• เข้าใจ Preview หน้า Preview สดที่อัปเดตขณะ AI แก้ไขไฟล์ มักเป็นเซิร์ฟเวอร์พัฒนาของ Vite
• เข้าใจการเผยแพร่ แอป Vite กลายเป็นโฟลเดอร์ไฟล์ static คือ HTML, JavaScript, CSS และรูปภาพ ซึ่งโฮสต์ได้ถูกและง่าย
• อ่านข้อความแจ้งข้อผิดพลาด เมื่อ Preview แสดงกรอบข้อผิดพลาดสีแดงหรือหน้าว่าง มักเป็น Vite รายงานว่าไฟล์คอมไพล์ไม่ผ่าน
• รู้ขีดจำกัดของมัน Vite build ส่วนหน้า (frontend) ถ้าแอปของคุณต้องการแบ็กเอนด์ เช่น ฐานข้อมูล คีย์ API ที่เป็นความลับ หรือการชำระเงิน สิ่งเหล่านั้นทำงานที่อื่น ดู frontend กับ backend

ตัวอย่างเปรียบเทียบในชีวิตประจำวัน

ลองนึกถึงครัวของร้านอาหาร

• ช่วงเตรียมงาน (การพัฒนา) เชฟชิมและปรับแต่งแต่ละจานระหว่างทำ เปลี่ยนเครื่องปรุงแล้วชิมอีกครั้งในวินาทีถัดมา นั่นคือเซิร์ฟเวอร์พัฒนาของ Vite: คุณเปลี่ยนไฟล์ หน้าจออัปเดตทันที บ่อยครั้งโดยไม่ทำให้สิ่งที่คุณพิมพ์ในฟอร์มหาย
• สำหรับออเดอร์จัดเลี้ยง (production) ทุกอย่างถูกปรุง ตัก บรรจุ และติดฉลากเพื่อให้เดินทางได้ดีและเสิร์ฟที่ไหนก็ได้ นั่นคือ vite build: โค้ดของคุณถูกรวม ลดขนาด และติดลายนิ้วมือ (fingerprint) ในชื่อไฟล์ พร้อมสำหรับโฮสต์ใดก็ได้

สูตรเดียวกัน แต่สองวิธีจัดการที่ต่างกันมาก และ Vite ทำได้ทั้งสองอย่าง

Vite ทำอะไรจริงๆ

เว็บแอปสมัยใหม่ประกอบด้วยไฟล์จำนวนมาก เช่น คอมโพเนนต์ สไตล์ รูปภาพ และไลบรารีของบุคคลที่สาม เบราว์เซอร์ใช้ไฟล์เหล่านั้นตามที่เขียนไม่ได้ TypeScript ต้องถูกแปลงเป็น JavaScript, JSX ของ React ต้องถูกแปลง และคลาส Tailwind ต้องกลายเป็น CSS

Vite จัดการเรื่องนี้ในสองโหมด:

เครื่องมือรุ่นเก่ารวมแอปทั้งหมดก่อนจะแสดงอะไรเลย ทำให้การเริ่มต้นและการอัปเดตโปรเจกต์ใหญ่ใช้เวลานาน เคล็ดลับของ Vite คือข้ามขั้นตอนนั้นในระหว่างพัฒนา และให้เบราว์เซอร์โหลดไฟล์เมื่อจำเป็น ส่วน production ยังคงรวมไฟล์ โดยตั้งแต่ Vite 8 ใช้ตัวรวมไฟล์ชื่อ Rolldown เพราะไฟล์เล็กจำนวนมากช้ากว่าไฟล์ที่ปรับให้เหมาะแล้วจำนวนน้อยสำหรับผู้เข้าชม

ตัวอย่างจริง: ภายในโปรเจกต์ Vite

ต่อไปนี้คือหน้าตาโดยประมาณของแอป Vite + React ขนาดเล็ก:

my-app/
  index.html          ← หน้า HTML เดียวที่แอปเริ่มต้น
  package.json        ← รายการไลบรารีและสคริปต์ (dev, build)
  vite.config.ts      ← การตั้งค่าและปลั๊กอินของ Vite
  src/
    main.tsx          ← เริ่ม React และเชื่อมเข้ากับ index.html
    App.tsx           ← คอมโพเนนต์ระดับบนสุดของแอป
    index.css         ← สไตล์ เช่น @import "tailwindcss";
  public/             ← ไฟล์ที่คัดลอกไปตามเดิม (favicon, robots.txt)

และสคริปต์ใน package.json:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

ลองติดตามการเปลี่ยนแปลงเดียว:

1. คุณขอ AI ว่า "ทำให้หัวข้อเป็นสีน้ำเงิน"
2. มันแก้คลาสใน App.tsx
3. Vite สังเกตว่าไฟล์เปลี่ยน แปลงเฉพาะไฟล์นั้น และส่งการอัปเดตไปยังเบราว์เซอร์
4. หัวข้อเปลี่ยนเป็นสีน้ำเงินใน Preview โดยปกติภายในหนึ่งวินาที

เมื่อเผยแพร่ vite build จะสร้างไฟล์อย่าง dist/index.html และ dist/assets/index-a1b2c3.js ส่วนที่ดูเป็นตัวอักษรสุ่มในชื่อไฟล์จะเปลี่ยนเมื่อเนื้อหาเปลี่ยน ทำให้เบราว์เซอร์และ CDN แคชไฟล์ไว้นานได้โดยไม่เสิร์ฟโค้ดเก่า

ตัวแปรสภาพแวดล้อมใน Vite

Vite เปิดเผยเฉพาะตัวแปรที่ชื่อขึ้นต้นด้วย VITE_ ให้โค้ดฝั่งเบราว์เซอร์เห็น เช่น VITE_PUBLIC_MAP_ID นี่คือมาตรการความปลอดภัย เพราะทุกอย่างในโค้ดเบราว์เซอร์ผู้เข้าชมมองเห็นได้ คีย์ลับจึงต้องไม่มีคำนำหน้านี้ และต้องอยู่บนแบ็กเอนด์ ดู ตัวแปรสภาพแวดล้อมและความลับ

คำศัพท์ที่ควรรู้

ข้อผิดพลาดที่พบบ่อยและความเข้าใจผิด

• "Vite คือเฟรมเวิร์ก" มันคือเครื่องมือ build เฟรมเวิร์กคือ React, Vue หรือ Svelte ส่วน Vite เป็นตัวรันและแพ็กเกจให้
• "แอป Vite มีแบ็กเอนด์ในตัว" แอป Vite มาตรฐานเป็นส่วนหน้าเท่านั้น ฐานข้อมูล การล็อกอิน และคีย์ลับต้องมีเซิร์ฟเวอร์หรือ API อยู่คู่กัน
• "เซิร์ฟเวอร์พัฒนาเอาขึ้นออนไลน์ได้" มันไม่ได้ออกแบบมารับทราฟฟิกจริง ให้เผยแพร่ผลลัพธ์ของการ build สำหรับ production เสมอ
• "ทุกอย่างใน .env เป็นความลับ" ในแอป Vite ตัวแปร VITE_ ถูกฝังลงในไฟล์ที่ผู้เข้าชมทุกคนดาวน์โหลด
• "หน้าที่เปิดแล้วขึ้น 404 แปลว่าแอปพัง" ใน single-page app โฮสต์ต้องส่งทุกเส้นทางกลับไปที่ index.html นี่เป็นการตั้งค่าของโฮสต์ ดู วิธีแก้ข้อผิดพลาด 404 หลังเผยแพร่

สิ่งที่ควรถาม AI builder

• "แอปนี้เป็น Vite อย่างเดียว (ส่วนหน้า) หรือมีแบ็กเอนด์ด้วย แต่ละส่วนรันที่ไหน"
• "รัน production build และแก้ข้อผิดพลาดหรือคำเตือนทั้งหมดก่อนที่ฉันจะเผยแพร่"
• "ตรวจว่าไม่มีคีย์ลับอยู่ในตัวแปร VITE_ หรือในโค้ดส่วนหน้าที่ไหนเลย"
• "Preview แสดงหน้าว่าง ให้ตรวจข้อความใน console ของ Vite และเบราว์เซอร์ แล้วแก้สาเหตุ" ดู วิธีแก้หน้าขาวว่างเปล่า
• "ทำให้แน่ใจว่าการรีเฟรชทุก URL ของหน้าใช้ได้หลังเผยแพร่ ไม่ใช่แค่หน้าแรก"

Vite ใน Mythex

ทุกโปรเจกต์ใหม่ของ Mythex เริ่มบน Vite เว้นแต่คุณจะขอ Next.js, HTML แบบ static หรือแบ็กเอนด์อื่น หน้า Preview สดในสภาพแวดล้อมส่วนตัวของคุณอัปเดตขณะ agent แก้ไขไฟล์ และ Publish จะ build แอปและนำขึ้นระบบให้ คุณไม่ต้องตั้งค่าโฮสติ้งเอง หากภายหลังคุณต้องการ API หรือฐานข้อมูล ให้ขอในแชท และ Mythex สามารถเพิ่มบริการแบ็กเอนด์ควบคู่กับส่วนหน้า Vite ได้ (แอปหลายบริการ)

คำถาม