Migrate React CRA to Vite in 10 seconds

ตอนนี้ Vite นั้นได้เปิดตัวมาเกือบ 5 ปีแล้ว ซึ่งเป็น build tool ที่ใช้เวลาที่สั้นมาก build ไวมากแบบ blazing fast และใช้งานง่ายระดับที่ developer ทั้งโลกให้การยอมรับ และถูกนำไปใช้ในหลาย library รวมถึง web frontend frameworks เจ้าใหญ่ทั้ง 3 เจ้าก็เลือกนำไปใช้ ทั้ง Vue, Angular และ React

ยกเว้น Next.js

เชื่อว่าหลายคนที่ทำงานกับ React ที่เป็นโปรเจครุ่นพี่อย่าง legacy projects ยังคงต้องใช้ Create React App หรือมี Webpack เป็น build tool อยู่ ซึ่งจุดที่เป็น pain point ที่หนักมาก คือ build time ค่อนข้างนาน แบบว่า run build แล้วไปดูซีรีย์แนวตั้งรอได้ นี่ยังไม่นับรวม config ที่เข้าถึงยากมาก บางครั้ง eject ออกมาก็ยังไม่สามารถ config ตามที่เราต้องการได้

วันนี้เราจะพาทุกคนไปใช้ Vite แบบที่ไม่ต้องทิ้งรุ่นพี่ legacy เหล่านั้น แต่เราจะเปลี่ยนรุ่นพี่ให้ build ไว และยังเก๋าเหมือนเดิมใน 10 วินาที

Steps

• ไปที่ root project folder ก่อน

$ cd <<YOUR_WORKING_SPACE>>

• ใช้ viject ในการ migrate โปรเจคของเรา โดย viject เป็น migration tool ที่จะ migrate จาก CRA ไปเป็น Vite

$ npx viject

ผ่ามม!! เสร็จแล้ว

สิ่งที่เราจะได้จาก viject คือ เปลี่ยน config ต่าง ๆ เป็น Vite และเปลี่ยน component file เก่า ๆ ที่เป็น js/ts เป็น jsx/tsx ให้เลย ที่เล่ามาคือใช้เวลาไม่เกิน 5 วินาที อีก 5 นาทีเผื่อให้ internet ช้า

สุดท้ายเรามาลอง build ดู ถ้าใช้งานได้ จะต้อง build ออกมาได้เหมือนเดิม แต่ไวแบบ blazing fast และได้ build time แบบระดับวินาที

เปลี่ยนเป็น Vite แล้วใช้เวลา build เท่าไหร่ มาอวดกันได้นะครับ

[embed]GitHub - bhbs/viject: A tool for migrating your React app from react-scripts (Create React App) to… A tool for migrating your React app from react-scripts (Create React App) to Vite - bhbs/vijectgithub.com