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

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

ในช่วงหลังๆ เวลาที่ผมจะ Demo หรือขึ้นโปรเจ็คตัวอย่างๆ ง่ายๆ ถ้าไม่ใช้ Next.js ผมก็จะใช้ตัว Vite.js นี่แหละ ในการขึ้นโปรเจ็ค React ขึ้นมา

โดยปกติเชื่อว่าหลายๆ คนน่าจะใช้ Create React App หรือ CRA ในการขึ้นโปรเจ็คด้วย React.js กัน หรือบางคนก็อาจจะใช้พวก Boilerplate หรือ Starter ต่างๆ

ข้อดีของ Vite

• Dev Server เร็วมากๆ รองรับ HMR คือดีต่อ Dev เวลาที่เราแก้ไขอะไร ไม่ต้อง refresh หน้าเลย มันแทบจะ real time.
• มี Script ที่ bundle code ให้เรา / ปรับ optimize พวก assets ต่างๆ พร้อม deploy production เลย
• รองรับ TypeScript แบบแทบไม่ต้องจะ config อะไรมาก
• รองรับ JSX ทั้งไฟล์ .jsx และ .tsx
• รองรับ CSS, PostCSS, CSS Modules แต่ Pre preocessors อื่นๆ อาจจะต้อง config เพิ่ม

วิธีการใช้งาน

1
npm create vite@latest

แบบสร้างโดยไม่ต้องนั่งเลือกตาม Prompt กำหนด ชื่อและ template เป็น option ไปเลย template React

1
npm create vite@latest my-react-app -- --template react

หรือใช้ Template React TypeScript

1
npm create vite@latest my-react-app -- --template react-ts

เมื่อเราได้โปรเจ็คแล้ว ก็เข้าไปในโฟลเดอร์ ติดตั้ง dependencies แล้ว start dev ดูได้เลยครับ

1
npm install
2

3
npm run dev

ตัว Vite จะเปิด dev server ที่ url http://localhost:5173 ได้หน้าตาแบบนี้

ทดสอบเปลี่ยนค่าที่ไฟล์ src/App.jsx แล้วดูผลลัพธ์ที่หน้าเว็บครับ จะเห็นว่าเว็บอัพเดทไวมาก ทำให้เราโฟกัสที่การทำงาน และทำงานได้รวมเร็ว สะดวกขึ้นครับ

ตัวอย่างที่น่าสนใจ

เรื่อง env

ตัว Vite จะมีวิธีการ get ค่า env แปลกๆหน่อย คือใช้ import.meta.env (ปกติเราจะเห็น process.env) และใช้ dotenv ฉะนั้น ก็จะอ่านไฟล์พวกนี้

1
.env
2
.env.local
3
.env.[mode] # env.development env.production

วิธีใช้งาน ก็แค่ตั้งชื่อ key ใน .env โดยใช้ prefix เป็น VITE_ (แต่ prefix เราสามารถ custom ได้ ถ้าอยากใช้ชื่ออื่น) เช่น

1
VITE_MY_APP=vite-react

และเวลาใช้งานก็แค่ เรียกแบบนี้ในโค๊ด

1
console.log(import.meta.env.VITE_MY_APP)

Static assets

เราสามารถโหลด แบบ inline / file loader ได้ด้วย

1
import assetAsURL from './asset.js?url'

ไฟล์ config ของ Vite จะใช้ vite.config.js

ส่วน features อื่นๆ ของ Vite ก็ยังมีอะไรหลายอย่างที่น่าสนใจ ลองไปอ่าน Docs เพิ่มเติมกันดูนะครับ

Happy Coding ❤️