Vite Config Generator: สร้างไฟล์ vite.config.ts ได้ในเบราว์เซอร์

ทุกโปรเจกต์ Vite มักเริ่มต้นด้วยพิธีกรรมเดิม ๆ คือสร้างไฟล์ vite.config.ts พยายามนึกให้ได้ว่า React ต้องใช้ plugin ตัวไหน ไปขุดค่า proxy จาก repo เก่า แล้วก็หวังว่า syntax ของ alias ที่เขียนไปยังถูกต้องอยู่ ยิ่งต้องทำทั้ง Vue และ Svelte ด้วยแล้ว การตั้งค่าเหล่านี้ก็กลายเป็นภาษีเล็ก ๆ ที่ต้องจ่ายก่อนจะได้เขียนโค้ดจริงสักที

Vite Config Generator ช่วยตัดพิธีกรรมนี้ออกไปทั้งหมด เป็นเครื่องมือ builder แบบ visual ที่ทำงานบนเบราว์เซอร์โดยตรง แปลงตัวเลือกง่าย ๆ ไม่กี่ชุดให้กลายเป็นไฟล์ vite.config.ts ที่สมบูรณ์ พร้อมคัดลอกไปใช้ได้ทันที เพียงเลือก preset ของ React, Vue หรือ Svelte ตั้งค่า port และ proxy ของ dev server เพิ่ม path alias สลับเปิดปิด sourcemap และ minify แล้วโค้ด TypeScript ก็จะอัปเดตให้เห็นแบบเรียลไทม์ ไม่ต้องติดตั้งอะไรเพิ่ม ไม่มีข้อมูลออกจากเครื่อง และไม่เสียค่าใช้จ่าย

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

ทำไมต้องใช้ Vite Config Generator?

• ข้ามขั้นตอนเขียน boilerplate ได้เลย การเขียน config เองตั้งแต่ต้นมักเจอพิมพ์ผิดทั้งชื่อ plugin และชื่อ option เครื่องมือนี้สร้าง TypeScript ที่ถูกต้องให้ วางแล้วรันได้ทันที
• Preset ของแต่ละ framework ติดตั้ง plugin ให้ถูกต้อง React, Vue และ Svelte ต้องการ plugin คนละตัว คลิกเดียวก็ได้ชุดที่ถูกต้อง ไม่ต้องกลัวสับสนระหว่าง @vitejs/plugin-react กับ plugin ของ Vue หรือ Svelte
• ลดปัญหา CORS ตอนพัฒนา การตั้งค่า proxy ในตัวจะส่งต่อ request ของ API ไปที่ backend ของคุณ ซึ่งเป็นจุดที่นักพัฒนาเกือบทุกคนเจอปัญหาครั้งแรก ๆ กับ SPA
• Import สะอาดขึ้นด้วย path alias แมป @ ไปที่ ./src ผ่านหน้าจอ ไม่ต้องไล่ debug path แบบ ../../../components เป็นครั้งที่สิบ
• ตั้งค่า build ได้เหมาะสมโดยไม่ต้องท่อง docs sourcemap และตัวเลือก minify เป็นแค่ toggle ง่าย ๆ พร้อมคำอธิบาย trade-off ด้านล่างนี้
• ฟรีและทำงานฝั่ง client ทั้งหมด เครื่องมือรันในเบราว์เซอร์ล้วน ๆ ใช้ได้ทั้งตอนออฟไลน์ ทุกระบบปฏิบัติการ และไม่ต้องสมัครสมาชิก

ฟีเจอร์หลัก

บางฟีเจอร์ควรอธิบายเพิ่มเติม Preset มีไว้เพราะการตั้งค่า plugin เป็นสาเหตุอันดับหนึ่งของ error แบบ "ทำไม JSX ถึง compile ไม่ผ่าน" การให้เครื่องมือจัดการแทนจึงตัด bug กลุ่มนี้ออกไปได้ทั้งหมด ส่วน proxy ทำงานตาม syntax ของ server.proxy ใน Vite อย่างใกล้ชิด สิ่งที่ตั้งผ่านหน้าจอจึงตรงกับสิ่งที่ลงไปในไฟล์เป๊ะ ๆ และเนื่องจากผลลัพธ์เป็น TypeScript คุณยังได้ autocomplete และ type-check ใน editor สำหรับไฟล์ config ที่สร้างขึ้นด้วย

วิธีใช้ Vite Config Generator

1. เลือก framework preset คลิก React, Vue หรือ Svelte แล้วเครื่องมือจะเพิ่ม plugin และ import ที่เกี่ยวข้องให้เอง
2. ตั้งค่า port และ proxy ของ dev server ใส่ port เช่น 5173 หรือ 3000 จากนั้นเพิ่มกฎ proxy ที่ชี้ path อย่าง /api ไปที่ URL ของ backend
3. เพิ่ม alias @ แมป @ ไปที่ ./src (หรือใส่ alias อื่น ๆ ที่ต้องการ) เพื่อให้ import สั้นและ refactor ง่าย
4. สลับ sourcemap และ minify ตัดสินใจว่า build production ควรมี sourcemap หรือไม่ และจะใช้ minifier ตัวไหน
5. คัดลอก TypeScript ที่สร้างขึ้น วางลงในไฟล์ vite.config.ts ที่ root ของโปรเจกต์ ติดตั้ง plugin ที่ระบุไว้ แล้วสตาร์ท dev server ได้เลย

แต่ละตัวเลือกของ Vite ทำอะไร

Plugin ของแต่ละ framework

Preset ของ React ต่อ @vitejs/plugin-react เข้ามาเพื่อจัดการ JSX transform และ fast refresh ส่วน Vue ใช้ @vitejs/plugin-vue สำหรับ compile single-file component และ Svelte ต้องพึ่ง plugin ของตัวเองสำหรับไฟล์ .svelte การเลือกผิดตัวเป็น error คลาสสิกของมือใหม่ แต่ generator ทำให้เรื่องนี้เป็นไปไม่ได้ เพราะแสดงเฉพาะ plugin ที่ตรงกับ preset ที่เลือกเท่านั้น

ทำไม dev proxy ช่วยลดปัญหา CORS

ตอนพัฒนา frontend รันบน port หนึ่ง ส่วน API รันอีก port หนึ่ง เบราว์เซอร์จะบล็อก request ข้าม origin เหล่านี้ เว้นแต่ backend จะส่ง CORS header แบบเปิดกว้าง ซึ่งปกติเราไม่อยากเปิดแบบนั้นใน production option server.proxy ช่วยข้ามปัญหานี้ได้ เพราะ request ที่ไปที่ /api จะถูก dev server ส่งต่อฝั่ง server ทำให้เบราว์เซอร์มองว่าเป็น same-origin ตั้งค่าครั้งเดียวผ่าน generator แล้วปัญหานี้ก็หายไป

Path alias เพื่อ import ที่สะอาด

Alias จะ rewrite import specifier ก่อนที่ bundler จะ resolve การแมป @ ไปที่ ./src ทำให้ @/components/Button กลายเป็น path จริง ช่วยให้ย้ายไฟล์ได้สบายและอ่าน import ได้ง่ายขึ้น generator เขียนบล็อก resolve.alias ให้พร้อม รวมถึง import ของ path ที่จำเป็นด้วย

Trade-off ของ build.sourcemap

Sourcemap แมปโค้ด production ที่ถูก minify กลับไปที่ source เดิม ควรเปิดใช้เมื่อ deploy ขึ้น staging หรือต้องการ monitor error ใน production เพราะ stack trace จะอ่านได้ แต่ต้องแลกกับไฟล์ deploy ที่ใหญ่ขึ้น และถ้าเปิด sourcemap แบบสาธารณะ ซอร์สโค้ดจะถูกใครก็ได้เปิดดู หลายทีมจึงเปิดเฉพาะ build ภายใน และปิดไว้สำหรับ bundle สาธารณะ

Minify: esbuild vs terser

Vite ตั้งค่าเริ่มต้นเป็น esbuild ซึ่งเร็วมากแต่ได้ไฟล์ที่ใหญ่กว่า terser เล็กน้อย ส่วน terser บีบขนาดได้อีกไม่กี่กิโลไบต์แต่ช้ากว่าและต้องติดตั้ง dependency เพิ่ม สำหรับโปรเจกต์ส่วนใหญ่ esbuild คือคำตอบที่เหมาะที่สุด ค่อยเลือก terser เมื่อทุกไบต์สำคัญจริง ๆ และเวลา build ไม่ใช่ปัญหา

กรณีใช้งานจริง

เริ่ม React SPA พร้อม API proxy

กำลังจะเริ่ม dashboard ที่ใช้ REST API อยู่ใช่ไหม สร้าง config จาก preset React ชี้ /api ไปที่ backend ท้องถิ่นบน port 8080 แล้วแมป @ ไปที่ ./src ภายในประมาณหนึ่งนาทีคุณก็ได้ชุดพัฒนาครบทั้ง frontend การสื่อสารกับ backend และ import ที่สะอาด

Svelte micro-frontends

ทีมที่ทำ micro-frontend มักมีแอป Svelte ขนาดเล็กหลายตัวที่ต้องไม่ชนกันเรื่อง port สร้าง config ให้แต่ละแอปด้วย port ของตัวเองและกฎ proxy สำหรับส่วน API ของตัวเอง ทุก service ก็รันได้อย่างอิสระภายใต้ convention เดียวกัน

Config ที่สอดคล้องกันทั้งทีม

ถ้าห้า repo ต่างคนต่างเขียน config เอง มันจะเริ่มเหลื่อมกัน: port ไม่ตรงกัน บาง repo ขาด sourcemap การสร้าง config เดียวกันทุก repo แล้ว commit ผลลัพธ์ไว้ ช่วยให้ developer experience เหมือนกันหมดไม่ว่าจะย้ายไปโปรเจกต์ไหน

สอน Vite ให้รุ่นน้อง

สำหรับการ onboarding เครื่องมือนี้ใช้เป็นสื่อการสอนได้ดีมาก รุ่นน้องกดสลับ option ทีละตัว เห็น config เปลี่ยนสด ๆ และอ่านคำอธิบายว่าแต่ละตัวทำอะไร ซึ่งเร็วกว่าการอ่านเอกสาร plugin ทั้งชุดเยอะ

แนวปฏิบัติที่ดี

• Commit ไฟล์ที่สร้างไว้ ถือว่า vite.config.ts เป็นโค้ด วางลง repo แล้วให้ code review ช่วยจับสิ่งที่ผิดปกติ
• รักษา alias ให้ตรงกับ tsconfig paths ถ้าใช้ @/... ใน import ให้แมปแบบเดียวกันไว้ใน paths ของ tsconfig.json เพื่อให้ type checker เห็นตรงกับ bundler
• ใช้ proxy เฉพาะตอนพัฒนา server.proxy ไม่มีผลกับ build production ส่วน reverse-proxy หรือ CORS จริง ๆ ควรอยู่ที่ infrastructure ของระบบ
• อย่าเปิด sourcemap สาธารณะคู่กับ bundle prod ที่ minify แบบไม่คิด ตัดสินใจให้ชัด: ซ่อน map ไว้สำหรับ error monitoring หรือไม่มี map เลยสำหรับ asset สาธารณะ
• เลือก esbuild เป็นค่าเริ่มต้น เว้นแต่วัดแล้วว่า terser คุ้ม build ที่เร็วกว่ามักคุ้มกว่าไฟล์ที่เล็กลงไม่กี่กิโลไบต์
• สร้างใหม่สำหรับโปรเจกต์ใหม่ แทนการก๊อปไฟล์เก่า config เก่ามักพา option ที่เลิกใช้แล้วมาด้วย การสร้างใหม่เริ่มต้นสะอาดกว่าเสมอ

เลิกเขียน boilerplate ด้วยมือได้แล้ว เปิด Vite Config Generator เลือก preset ที่ต้องการ แล้วคัดลอกไฟล์ vite.config.ts ที่สะอาดได้ในไม่ถึงหนึ่งนาที ฟรี ไม่ต้องสมัคร และทำงานทั้งหมดในเบราว์เซอร์ของคุณ

เครื่องมืออื่น ๆ ที่น่าสนใจ:

• Package JSON Generator — สร้าง package.json ที่ถูกต้องพร้อม scripts และ dependencies
• GitHub Actions Workflow Generator — scaffold workflow CI โดยไม่ต้องท่อง YAML
• YAML Formatter — ตรวจสอบและจัดรูปแบบไฟล์ YAML ในเบราว์เซอร์

ขอให้สนุกกับการ build!

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

ถ: Vite Config Generator ใช้ฟรีจริงไหม? ตอบ: ฟรีทั้งหมด ไม่ต้องสมัครบัญชี และทำงานในเบราว์เซอร์ล้วน ๆ config ของคุณไม่เคยออกจากเครื่อง

ถ: config ที่สร้างใช้กับโปรเจกต์ JavaScript ได้ไหม? ตอบ: ผลลัพธ์เป็น TypeScript ที่ถูกต้อง แต่ทุก option ที่ตั้งไว้เข้ากับ JavaScript ปกติ บันทึกเป็น vite.config.js ปรับ import ของ path ตามที่ setup ต้องการ ก็รันได้สบาย

ถ: มี preset ของ framework อะไรบ้าง? ตอบ: React, Vue และ Svelte แต่ละ preset เพิ่ม plugin ที่ถูกต้องของ framework นั้น และคุณปรับ port, กฎ proxy, alias, sourcemap และ minify เพิ่มได้จากทุก preset

ถ: หลังคัดลอก config แล้วต้องติดตั้ง plugin เองไหม? ตอบ: ใช่ generator เขียนแค่ไฟล์ config ส่วน package อย่าง @vitejs/plugin-react ต้องเพิ่มเข้าโปรเจกต์ด้วย package manager ก่อน dev server จะสตาร์ทได้