אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » פיתוח ב-JavaScript » הרמת פרויקט פרונטאנדי במהירות עם Vitejs

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

רן בר-זיק ינואר 15, 2023 7:07 am 4 תגובות

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

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

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

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

npm create [email protected]

או עם 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 זה בצרפתית ״מהר״, שזה בדיוק מה שהמערכת הזו עושה.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

4 תגובות

  1. דוד הגב ינואר 15, 2023 בשעה 11:26 am

    הי
    תודה, חשוב. אשמח אם תפרט יותר על הבעייתיות ביחס לפרוייקטים גדולים.

  2. נועם הגב ינואר 16, 2023 בשעה 7:38 pm

    אני מניח שהחיסרון בפרוייקטים גדולים הוא שאין באנדל וכל קובץ מקור דורש בקשת רשת משלו.

    השאלה אם יש אפשרות להשתמש במודולים נייטיביים בזמן הפיתוח ובבאנדל לפרודקשן, או שזה לא אמין?

  3. אביחי הגב ינואר 17, 2023 בשעה 10:32 am

    גם אני לא חושב שהייתי מפתח היום פרויקט בקנה מידה גדול עם ריאקט.

  4. עמית הגב ינואר 19, 2023 בשעה 7:10 am

    עכשיו אני משוכנע לעבור מריאקט לווייט

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

    הפרויקטים שאני כותב ושוחררו לציבור ברישיון קוד פתוח נמצאים ברובם בגיטהאב.
חיפוש

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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