วิธีการสร้างโปรเจ็ค React ด้วย Vite

บทความแนะนำ Frontend Tooling ตัวที่ชื่อว่า Vite (อ่านว่า วีด) ซึ่งเจ้า Vite เค้านิยามตัวเองว่าเป็น Next Generation Frontend Tooling

Vite

Next Generation Frontend Tooling

Get Started

TLDR;

แบบ Prompt:

npm create vite@latest

# หรือ Yarn
yarn create vite@latest

แบบใช้ Options

npm create vite@latest hello-react -- --template react

# แบบ TypeScript
npm create vite@latest hello-react -- --template react-ts

ผมเคยเขียนบทความเกี่ยวกับการสร้างโปรเจ็ค React.js ด้วย Vite ไปแล้ว ที่บทความนี้

Devahoy - สร้างโปรเจ็ค React ด้วยการใช้ Vite

วันนี้จะมาแนะนำ Frontend Tooling ตัวนึงที่ชื่อว่า Vite อ่านว่า วีด อ่านคล้ายๆกับ veet โดย Evan You ผู้สร้าง Vue.js นั่นเอง แต่ตัว Vite ไม่ได้รองรับแค่ Vue มันรองรับ React ด้วย เลยเป็นที่มาของบทความนี้ในช่วงหลังๆ เวลา

Chai Phonbopit

Features เด่นๆ คือ

• Instant Server Start - สั่งรัน Server ได้เร็วมากๆ
• Lightning Fast HMR - แก้ไขโค๊ดปุ๊บ เห็นผลลัพธ์โดยไม่ต้อง Refresh
• Rich Features - ตั้งค่า TypeScript, JSX, CSS ให้เราหมดแล้ว
• Optimized Build - รวมถึงพร้อม Build และ Deploy Production

เริ่มสร้างโปรเจ็ค

เราสามารถสร้างโปรเจ็ค React ด้วย Vite ได้ทั้ง JavaScript และ TypeScript ผ่านหน้า Wizard ใน Command Line ได้เลย

ด้วยการใช้ NPM

npm create vite@latest

หรือใช้ Yarn

yarn create vite

จากนั้นจะมี Prompt ขึ้นมาให้ถามเรา ให้เราเลือก Template / ภาษาที่จะใช้ได้เลย เช่น JavaScript หรือ TypeScript และจะใช้ SWC หรือไม่ก็เลือกได้เช่นกัน

เมื่อทำการเลือกเสร็จแล้ว ก็ทำตามที่หน้าจอบอก คือ เข้าไปโฟลเดอร์ที่เราเพิ่งสร้าง และก็ติดตั้ง dependencies สุดท้าย start ด้วยคำสั่ง yarn dev

  cd hello-vite
  yarn
  yarn dev

เมื่อเปิดหน้าเว็บ http://localhost:5173/ ก็จะได้หน้าตาแบบนี้

หรือหากใครจะสร้างโปรเจ็คแบบใช้ Option ด้วยคำสั่งเดียวเลย ก็สามารถเลือก template ได้แบบนี้

npm create vite@latest hello-react -- --template react

# แบบ TypeScript
npm create vite@latest hello-react -- --template react-ts

ตัว Template ของ React ได้แก่

• react - React แบบ JavaScript ธรรมดา
• react-ts - React แบบใช้ TypeScript
• react-swc - React JavaScript ด้วย SWC
• react-ts-swc - React TypeScript ด้วย SWC