สร้าง Web Application ด้วย Vite + React และ TypeScript
หากใครที่กำลังต้องการติดตั้ง React.js และ TypeScript เพื่อทำงานร่วมกัน วิธีหนึ่งที่รวดเร็ว คือการติดตั้งผ่าน Vite นั่นเอง
Vite คือ Frontend Tooling ที่ช่วยอำนวยความสะดวกในการขึ้นโปรเจ็กต์อย่างรวดเร็ว โดยที่เราเลือก option แค่ไม่กี่ข้อ ก็จะได้ project bundle มาพร้อมใช้งานทันที
มาเริ่มต้นสร้าง Application กันที่คำสั่ง
npm create vite@latestต่อมา กด y ที่ Ok to proceed? แล้วเลือก choice ตามนี้
Need to install the following packages:
[email protected]
Ok to proceed? (y) y
✔ Project name: … typescript-react
✔ Select a framework: › React
✔ Select a variant: › TypeScript
Scaffolding project in /Users/washira/typescript-react...
Done. Now run:
cd typescript-react
npm install
npm run dev
ในโปรเจ็กต์ เรามีการสร้างชื่อว่า typescript-react และเลือก Framework เป็น React จากนั้น เลือกภาษาที่จะใช้พัฒนา คือ TypeScript ตามลำดับ
เนื่องจาก Vite ไม่ได้ให้ node modules มาด้วย โดยมีเพียง package.json มาเท่านั้น เราจึงต้องติดตั้งเอง เข้าไปที่ directory ของโปรเจ็กต์ จากนั้น ติดตั้ง node modules ด้วยคำสั่ง
npm installและรันโปรเจ็กต์บน local ของเราที่คำสั่ง
npm run devจะมีข้อความขึ้นมาประมาณนี้
VITE v4.2.1 ready in 395 ms
➜ Local: http://127.0.0.1:5173/
➜ Network: use --host to expose
➜ press h to show helpเปิด internet browser แล้วใส่ url ที่ http://127.0.0.1:5173/ ตามที่ระบุในข้อความ เราจะเห็นหน้าเว็บออกมาเป็นดังนี้
ถ้าเราอยากเปลี่ยน port ให้เป็นเลขอื่นที่ต้องการ ให้เพื่มโค้ดที่ vite.config.ts ดังนี้
// https://vitejs.dev/config/
export default defineConfig({
server: { port: 3000 }, // เพิ่มบรรทัดนี้
plugins: [react()],
})นี่เป็นวิธีการสร้างและตั้งค่าเบื้องต้นที่เราสามารถขึ้นโปรเจ็กต์ด้วย React ได้ไวมาก เพราะ Vite มีความเบา ทำให้ประหยัดพื้นที่ และ render ไวดี บวกกับสามารถพัฒนาด้วย TypsScript ได้ ไม่ต้องตั้งค่าเพิ่มเติมเลย ก็นับว่าเป็นอีกหนึ่งข้อดีของ Vite ที่น่าสนใจครับ
