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

בעזרת Vite תוכלו לבנות פרויקטים של הפריימוורקס המובילים - Vue, React, Svelte, preact ועוד אחד שנקרא lit-element, וכמובן פרויקט וונילה ללא פריימוורק. בכל אחד מהמקרים תקבלו תבנית לפרויקט וסקריפטים להגשה במצב פיתוח או בניה במצב פרודקשן.

הנה 5 דברים שאהבתי ואחד שלא כל כך בפרויקטי Vite שיצרתי:

1. השם

כי חייבים לחייך כשאיוון יו מוצא שפה שבה המילה "מהירות" מתחילה באות V והפועל "להאט" מתחיל באות R.

2. חווית הפיתוח

כן, זה מהיר. קודם כל כי יש הרבה פחות תלויות אז הקמת פרויקט ריאקט לקחה לי 15 (בהשוואה ל create-react-app שביום טוב מסיים תבנית בשתי דקות). גם הרצת הפרויקט וזיהוי השינויים בזמן אמת עובדים הרבה יותר מהר מפרויקטים של create-react-app.

הסיבה המרכזית למהירות לטענת איוון יו היא המעבר לשימוש ב ES Modules במצב פיתוח, כלומר הוא לא טורח לרוץ על כל הקבצים ולבנות באנדל במצב פיתוח ובמקום זה משתמש בתמיכה הטבעית בדפדפנים ב import. זה עובד גם מבחינת זמן עליה מאוד מהיר של השרת וגם מבחינת זיהוי שינויים וטעינה מחדש מיידית של הקוד העדכני.

3. אפס קונפיגורציה

הגישה של create-react-app לאפס קונפיגורציה היא איומה: הם משתמשים ב webpack אבל לא נותנים לכם לגעת בקונפיגורציות וובפאק שלהם. הם מחזיקים מערך אינסופי של Build Scripts ששוב אי אפשר לגעת בו, ואם תעזו לחלום על משהו שהם לא תומכים בו הם יצעקו עליכם ויזרקו עליכם מאות שורות של קבצי הגדרות שתתחזקו בעצמכם.

איוון יו החליף את וובפאק ב Rollup, לטענתו משיקולי מהירות, אבל הדבר החשוב הוא שחוץ מערכי ברירת מחדל מעולים הוא גם נותן לנו גישה להגדרות ה Rollup ואפילו מתעד את זה. רוצים ליצור פרויקט עם מספר קבצי HTML? אין בעיה. רוצים לשנות את מבנה קובץ ה HTML שנוצר? הכי קל בעולם, הוא חלק מהפרויקט.

וכמובן TypeScript ו Scss נתמכים Out Of The Box - פשוט טוענים קובץ עם הסיומת המתאימה והכל עובד.

נכון, אנחנו מחויבים למבנה של ES Modules ומזה לא הצלחתי לברוח - אבל במאזן הכללי של הדברים נראה לי שאיוון יו עשה עבודה די טובה. כל עוד אתם מוכנים לסמוך על התמיכה המובנית בדפדפנים ב ES6 Modules פרויקט vite יעבוד לכם די טוב. (ואם אתם כן צריכים תמיכה בדפדפנים ישנים יש להם Legacy Plugin שנראה שנותן פיתרון).

4. חיסול אוטומטי של פונקציות מתות

גם בלי קונפיגורציה הדברים החשובים שם. כשניסיתי ליצור קובץ utils.js שמייצא שתי פונקציות:

export function foo() {
    return "foo";
}

export function bar() {
    return "bar";
}

אבל בקובץ ה main.js טענתי רק אחת מהן:

import { foo } from './utils';

כצפוי הפונקציה bar אותה לא טענתי לא נכנסה לבאנדל שבניתי. הוא גם מספיק חכם בשביל לייצר קובץ vendor.js לספריות מ node_modules ולהוסיף Hash לשם הקובץ כדי להתמודד עם Browser Cache.

5. פרויקט ריאקט בלי reportWebVitals

רק עד לפה היה מספיק לי בשביל להתחיל להשתמש ב vite לכל פרויקט ריאקט חדש שאני בונה - אבל אז גיליתי את הממתק האחרון: פרויקטי ריאקט שתבנו עם vite לא יכלול את הספריה web-vitals ולא יפעיל את reportWebVitals באופן אוטומטי. לא שיש לי משהו נגדם, פשוט מעדיף שתבניות פרויקט יכללו רק פיצ'רים שאני באמת מבקש.

6. ורמאות אחת: זמן בניה לפרודקשן

למרות כל הדברים הטובים איוון יו הוסיף גם טריק מלוכלך אחד ל Vite: הוא ביטול יצירת Source Maps במצב פרודקשן. המטרה היתה כנראה לשפר מהירות בניה לפרודקשן והמחשבה היתה שממילא אף אחד לא ישים לב, ונכון די קל להחזיר את זה (בסך הכל שינוי הגדרה בקובץ הקונפיגורציה). ועדיין.

ההבדל בין Source Maps ל reportWebVitals הוא שב Source Maps אנחנו באמת משתמשים בפרודקשן. כשיש באג בפרודקשן שלא משתחזר בפיתוח, מאוד עוזר לפתוח את כלי הפיתוח ולראות את הקוד המקורי שכתבת.

בסך הכל ויט לגמרי שווה את הזמן שלכם - זמן הלימוד קצר וחווית הפיתוח הרבה יותר טובה מ create-react-app. לפרטים נוספים תוכלו לבקר באתר שלהם בקישור: https://vitejs.dev/