React : สร้างโปรเจค React ด้วย Vite

ปกติแล้วเวลาเราจะสร้างโปรเจค React เราจะใช้เครื่องมือ Create React App (CRA) ซึ่งเครื่องมือตัวนี้จะจัดการเครื่องมือและไลบรารี่ที่ต้องใช้ใน React และ Template ของโปรแกรมให้เรียบร้อย ทำให้นักพัฒนาที่ต้องการเขียนโปรแกรม React นั้นได้เริ่มต้นการเขียนโปรแกรมได้เลย โดยไม่ต้องไปติดตั้งและตั้งค่าเครื่องมือเริ่มต้น

บล็อกนี้จะแนะนำอีกหนึ่งเครื่องมือที่จะอำนวยความสะดวกในเรื่องการสร้างโปรเจคของ Node.js (รวมโปรเจค React ด้วย) ได้อย่างง่ายและรวดเร็ว

เครื่องมือนี้มีชื่อว่า Vite (อ่านว่า /vit/) มาจากภาษาฝรั่งเศษ แปลว่าเร็ว Vite พัฒนาโดย ผู้พัฒนา Vue.js (Evan You) โดยมุ่งหวังให้เป็นเครื่องมือที่จะทำให้การพัฒนาโปรเจคเว็บไซต์ (modern website project) นั้นทำได้อย่างรวดเร็วและเรียนรู้ได้ง่ายขึ้นกว่าเดิม ประเด็นหลักของ Vite ประกอบด้วย 2 อย่าง คือ

1. การเพิ่มประสิทธิภาพให้กับ dev server เช่น fast Hot Module Replacement (HMR)
2. คำสั่ง build จะใช้ Rollup ในการรวมโค้ด และมีการปรับแต่งการตั้งค่าให้เหมาะสมที่สุดสำหรับ production

อ่านเพิ่มเติม ในส่วน Why Vite

เริ่มสร้างโปรเจคด้วย Vite

ต้องใช้ Node.js เวอร์ชัน 12.0 ขึ้นไปในการรัน Vite สามารถใช้ได้ทั้งคำสั่ง npm yarn และ pnpm ดังนี้

ใช้ NPM

$ npm init vite@latest

ใช้ Yarn

$ yarn create vite

ใช้ PNPM

$ pnpm dlx create-vite

เมื่อกดใช้คำสั่งการติดตั้ง vite ไปแล้ว โปรแกรมจะแสดงขั้นตอนการติดตั้งให้เราใส่ชื่อโปรเจค และเลือก template

ตัวอย่างเลือกเป็น react เมื่อเลือกแล้ว โปรแกรมจะถามว่าจะใช้เป็น react (js) หรือ react-ts

ตัวอย่างเลือก react-ts เมื่อเลือกเสร็จเรียบร้อย vite จะดาวน์โหลดไฟล์ที่จำเป็นในโปรเจคมาเตรียมไว้ให้

จากนั้นให้เราเข้าไปที่โฟลเดอร์ของโปรเจคแล้วกดคำสั่งติดตั้งโมดูลต่างๆ

คำสั่งที่จะรันต่อไป

cd react-vite-app
npm install

เมื่อรันคำสั่ง npm install จะเห็นได้เลยว่า vite จะทำการติดตั้งโมดูลเพียง 84 แพ็กเก็จเท่านั้น ทำให้ใช้เวลาการติดตั้งน้อยกว่า Create React App (CRA) มาก (ตัวอย่างใช้เวลาเพียง 26 วินาที)

จากนั้นพิมพ์คำสั่งทดสอบโปรแกรม

npm run dev

Vite ใช้เวลาในการรันเซิฟเวอร์ไม่ถึง 1 วินาที

จากนั้นให้ใส่ URL http://localhost:3000/ ที่ เบราเซอร์ เราก็จะได้เห็นผลลัพธ์ของโปรเจคเริ่มต้น React ที่สร้างด้วย Vite

การสร้างโปรเจค React ด้วย Vite นั้นสามารถทำได้ง่าย และรวดเร็ว ทั้งการติดตั้งและการรันเซิฟเวอร์เทส

โปรเจคที่ Vite รองรับมีดังต่อไปนี้

• vanilla
• vanilla-ts
• vue
• vue-ts
• react
• react-ts
• preact
• preact-ts
• lit-element
• lit-element-ts
• svelte
• svelte-ts

ถ้าเรารู้ชื่อของ Template หรือ โปรเจคที่เราต้องการสร้างด้วย Vite แล้ว เราสามารถสร้างโปรเจคนั้นด้วยคำสั่งเดียวได้เลย

# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm init vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

หากต้องการเช็คเวอร์ชันของ npm ในเครื่อง ใช้คำสั่ง

npm version

โค้ดโปรแกรมในโปรเจค

จะมาดูกันว่ามีอะไรในโปรเจคที่ให้มาจาก Vite ที่แตกต่างกับ CRA บ้าง

1. ไฟล์ package.json จะมีเฉพาะโมดูลที่จำเป็นต่อการรัน React ที่ใช้ Typescript เท่านั้น และโมดูลที่จำเป็นของ Vite และจะไม่มีโมดูลพวก Testing library และ React Script เหมือนกับ CRA จึงทำให้ขนาดของโปรเจคนั้นเล็กกว่าโปรเจ็คที่สร้างจาก CRA

{
  "name": "react-vite-app",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  },
  "devDependencies": {
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@vitejs/plugin-react": "^1.0.0",
    "typescript": "^4.3.2",
    "vite": "^2.5.4"
  }
}

2. ไม่มีโฟลเดอร์ public เหมือน CRA เราจะเห็นไฟล์ index.html อยู่ที่โฟลเดอร์นอกสุดของโปรเจค

โดยเที่จะเรียก สคิป main.tsx(js) และ favicon จากโฟล์เดอร์ src มาใช้งาน

3. การใช้งานตัวแปรจากไฟล์ .env จะต้องตั้งชื่อตัวแปรนำหน้าด้วย VITE_APP_ เช่น

# .env
VITE_APP_TITLE=My App

เวลาเรียกใช้ ให้เรียกใช้ด้วยตัวแปร

import.meta.env.VITE_APP_TITLE

เช่น

<p>Hello Vite + React!</p>
<p>{import.meta.env.VITE_APP_TITLE}</p>

ขนาดไฟล์ที่ได้หลังทำการ Build

การ build จะใช้คำสั่ง

npm run build

เมื่อทำการ build เรียบร้อยแล้ว จะเห็นว่าไฟล์ที่ build จะไปอยู่ในโฟลเดอร์ dist

เราสามารถลากโฟลเดอร์ dist ไปวางใส่ใน Netlify เพื่อสร้างเว็บขึ้นมาได้ทันที

สังเกตดูขนาดรวมของไฟล์ที่ build แล้วจาก Vite จะมีขนาดเล็กกว่าโปรเจคที่ build จาก CRA อยู่เยอะพอสมควร

สรุป

• Vite เป็น framework library ที่ให้เราสามารถสร้างเว็บไซต์ได้ด้วย template ต่างๆ ไม่ว่าจะเป็น Javascript (Vanilla), React, Vue, Preact, Svelte ซึ่งรองรับทั้ง Javascript และ Typescript
• Vite โดดเด่นเรื่องความเร็วในการติดตั้งและการรันในการทำงาน มาพร้อมกับ Fast Refresh ที่เมื่อเราแก้ไขโค้ดแล้ว ผลลัพธ์จะแสดงในหน้าเว็บทันที (ตรงนี้ก็คล้ายๆ กับ Hot Reload) และการรันเซิฟเวอร์ที่ใช้เวลาเพียงไม่ถึง 1 วินาที
• Vite โดดเด่นเรื่องขนาดของโปรเจคและไฟล์ที่ build เสร็จแล้ว จะมีขนาดเล็กกว่าของ CRA
• Vite ยังมีความสามารถอื่นๆ อีกเช่น Server-Side Rendering (SSR) และ Backend Integration
• ปัจจุบัน Vite พัฒนามาถึงเวอร์ชัน 2.5.1 แล้ว ซึ่งจุดอ่อนหรือข้อด้อยเมื่อเทียบกับ CRA ถือว่ามีน้อยมาก ซึ่งเราอาจจะลองใช้ Vite ในการสร้างโปรเจค React ครั้งต่อไปแทน CRA ก็อาจจะเป็นได้ สำหรับโปรเจคเล็กๆ ส่วนโปรเจคที่สเกลใหญ่ ยังมั่นใจใน CRA อยู่แน่นอน

อ้างอิง

1. https://vitejs.dev/guide/
2. https://reactjs.org/docs/create-a-new-react-app.html