הרמת פרויקט פרונטאנדי במהירות עם Vitejs

מערכת להרמת סביבת פיתוח במהירות. גם לונילה!

יש לנו בעיה כאשר אנו מפתחים פרויקטי פרונט אנד, הסביבה של פרויקט פרונט אנדי ממוצע, ריאקטי או לא, הופכת לכבדה ומסורבלת מאוד עם לפעמים מאות מודולים שמסבכים ומסרבלים את הליך הפיתוח. גם מבחינת זמן וגם מבחינת תקלות שונות שמתרחשות כאשר מנסים להרים בילד. הסיבות ללמה זה קורה הן באמת רבות, אבל יש לא מעט רכיבים שמעורבים בבנייה של פרויקט ובקימפול/טרינספול מטייפסקרייפט אל ג׳אווהסקריפט והפעלה גם של hot load כאשר יש שינוי.

העניין הוא שאפשר לעקוף את זה ולצמצם תהליכים. ברגע שדפדפנים החלו לתמוך במודולים של ESM ו-dynamic import, אם אנחנו לא רוצים לתמוך בדפדפנים ישנים מדי, אנחנו בהחלט יכולים לעבור לשיטות רזות יותר של פיתוח מערכות פרונט אנד ו-vitejs (לאתר הרשמי), מבית היוצר של אוון יו, הוגה Vue ממשת את השיטות האלו. אפשר לקרוא כאן באתר הרשמי בכל הנוגע למידע מפורט יותר שמסביר למה הבילד/תהליך הפריסה של vitejs מהיר יותר.

כמובן שכשמדובר במערכות גדולות, צריך לבחון היטב את vitejs ולראות אם היא משתלמת, אבל לפרויקטים קטנים? היא מהממת והיא הפכה להיות ה-goto שלי בכל מה שקשור לפרויקטים קטנים. אז זו הסיבה שאני כותב עליה.

אז היא היא נראית? בפועל מודול של npm שמותקן באופן הזה:

npm create vite@latest

או עם yarn אם מאוד משעמם לכם: yarn create vite. ואז יש כמה שאלות לענות עליהן, למשל באיזה פריימוורק תרצו לעבוד כשאפשר כמובן לבחור ג׳אווהסקריפט ונילה, כלומר בלי תוספות. וזה מהמם.

npm create vite@latest                              
✔ Project name: … my-demo-project
✔ Select a framework: › Vanilla
✔ Select a variant: › TypeScript

Scaffolding project in /Users/barzik/local/my-demo-project...

Done. Now run:

  cd my-demo-project
  npm install
  npm run dev

אחרי ה-npm install, מרימים את vite. הדבר הראשון שאפשר לראות הוא המהירות העצומה שבה הוא עולה.

VITE v4.0.4  ready in 319 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

אם נכנס ל-localhost נראה את האתר.

המסך הראשי של אפליקציה נקייה שהורמה עם Vite.

יש כמיטב המסורת קוד נאה ודוגמה. ואפשר לערוך את הכל. קובץ ה-HTML שמכיל את האופרציה נמצא ב-dist. אפשר מייד להתחיל לפתח.

הבילד הוא פשוט במיוחד ואפשר להריץ אותו עם npm run build. אחרי הבילד אפשר לבדוק איך הבילד נראה עם npm run preview.

בעוד שאני לא יודע אם הייתי מפתח פרויקט ריאקטי בסקייל גדול על vite, זה מאוד מאוד נעים ונחמד לראות סביבה לפיתוח של טייפסקריפט נקי שמצד אחד היא מתקדמת ומספקת את מה שאני צריך ומהצד השני נשארת נעימה וקלה. צריך לזכור שלא מעט פעמים, אנחנו לא צריכים מערכת גדולה. לפעמים רק מערכת קטנה ומצומצמת תסגור לנו את מה שאנחנו צריכים. כלי נהדר בארסנל הכלים של מפתחי פרונט אנד.

אגב, vite זה בצרפתית ״מהר״, שזה בדיוק מה שהמערכת הזו עושה.

פוסטים נוספים שכדאי לקרוא

DALL·E 2023-10-21 22.28.58 - Photo of a computer server room with red warning lights flashing, indicating a potential cyber threat. Multiple screens display graphs showing a sudde
יסודות בתכנות

מבוא לאבטחת מידע: IDOR

הסבר על התקפה אהובה ומוצלחת שבאמצעותה שואבים מידע מאתרים

ESP32 מאפס לילדים

מדריך ל-ESP32 לילדים ולהורים מאפס

אחד הדברים הכי כיפיים בעולם הוא תכנות ותכנות בעולם האמיתי – המפעיל אורות, ציוד אלקטרוני ומכשירים הוא מלהיב ממש. המדריך מיועד להורים שרוצים ללמד את הילדים שלהם לתכנת.

תמונה של הבית הלבן עם מחשוב ענן וטקסט: FEDRAMP
פתרונות ומאמרים על פיתוח אינטרנט

FedRAMP & FIPS מבוא למתחילים

פרק מיוחד, לצד הקלטה של פרק של עושים תוכנה על אחת התקינות החשובות ביותר עבור חברות שסביר להניח שלא הכרתם

מיקרו בקרים

בית חכם עם ESPHome ו Home Assistant

הסבר על הום אסיסטנט, מערכת הקוד הפתוח לבית חכם ואיך לחבר אליה מיקרובקרים.

גלילה לראש העמוד