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

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

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

תוכלו לחקור כיצד להתחיל עם Vite, תוך כיסוי תהליך ההתקנה שלו, תכונות חיוניות ופקודות ממשק שורת הפקודה (CLI).

אתחול פרויקט Vite

לפני שתוכל להשתמש וייט, עליך להתקין Node.js ו-Node Package Manager במערכת שלך. לאחר התקנת שתי החבילות הללו, תוכל להמשיך ליצור פרויקט עם Vite.

הנה איך לאתחל פרויקט עם Vite באמצעות npm:

npm init vite

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

להלן פירוט של האפשרויות שהפקודה מבקשת ממך לבחור:

  1. שם הפרויקט. כאשר אתה מפעיל את הפקודה, היא מבקשת ממך לספק שם לפרויקט החדש שלך. השם שתספק יופיע גם ב- package.json קובץ ומשמשים כשם ספריית הפרויקט שלך.
    2. instagram viewer
  2. בחר מסגרת. הנחיה זו תבקש ממך לבחור מסגרת לפרויקט שלך. Vite תומך כרגע במסגרות חזיתיות פופולריות כמו React, Vue, Angular ואפשרות Vanilla לקוד JavaScript רגיל.
  3. בחר וריאנט. זה מנחה אותך לבחור גרסה לפרויקט שלך, המכסה חלופות כגון JavaScript ו שפת המשנה שלה TypeScript.

לאחר שתספק את המידע הנדרש, Vite יפיק מבנה פרוייקט חדש בספריית העבודה הנוכחית שלך. המבנה ייצג מערך פרויקט בסיסי, כולל א package.json קובץ, א src ספרייה עם index.html ו main.js קובץ, וכן א פּוּמְבֵּי מַדרִיך.

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

כדי להפעיל שרת פיתוח ולנטר כל שינוי שבוצע בפרויקט שלך, תפעיל את npm run dev פקודה בתוך מסוף הפרויקט שלך.

תכונות של Vite

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

שרת פיתוח מהיר

שרת הפיתוח של Vite משתמש במודולי ES מקוריים וטעינת מודולים עצלה, מה שמאפשר מהירות מדהימה. זה מאפשר לולאות משוב מהירות וזמני הפעלה מהירים.

תהליך בנייה אופטימלי

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

תמיכה במסגרות פרונט-אנד שונות

Vite תומך במסגרות חזיתיות שונות, כולל Vue, ו מסגרות דומות כמו React Js ו-Angular Js. זה מאפשר למפתחים לבחור את המסגרת המועדפת עליהם ולרתום את היכולות החזקות של Vite.

החלפת מודול חם (HMR)

תכונת החלפת מודול חם (HMR) של Vite מאפשרת עדכונים מהירים וחלקים לאפליקציה מבלי לדרוש רענון עמוד מלא. זה הופך את תהליך הפיתוח למהיר ויעיל יותר.

CSS Preprocessing ו- PostCSS Integration

Vite תומך בעיבוד מקדים של CSS, כולל Sass, Less ו-Stylus. זה גם משתלב עם PostCSS, מה שמאפשר טרנספורמציות ואופטימיזציות נוספות ל-CSS.

Vite מגיע עם תכונות רבות אחרות, כולל תמיכה ב-TypeScript, JSX ו-WebAssembly. עם שחרורו של Vite v4.0.4, קהילת המפתחים של Vite גדלה ותחזקה באופן פעיל את התוכנה, והוסיפה תכונות חדשות קבועות.

ממשק שורת הפקודה של Vite (CLI)

ממשק שורת הפקודה של Vite (CLI) הוא כלי שימושי להתאמה אישית של ההתנהגות של Vite. הוא מספק מגוון של פקודות חיוניות המסייעות גם לייעל את תהליך הפיתוח. להלן כמה מפקודות CLI החיוניות:

vite לבנות

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

תצוגה מקדימה של vite

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

vite optimize

vite optimize זמין ב-Vite 2.6 ואילך גרסאות המנתחות את קוד הפרויקט ויוצרות בניית ייצור אופטימלית על ידי ביצוע עץ ניעור, פעולות פיצול קוד והטמעת נכסים קטנים ישירות לתוך ה-build הסופי כדי לצמצם את הבקשות הדרושות לטעינת אפליקציה.

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

קובץ התצורה של Vite

ב-Vite, קובץ התצורה מגדיר אפשרויות שונות לתהליך הבנייה. קובץ התצורה של Vite משתמש ב-JavaScript ובתחביר המודולים של ES6.

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

להלן כמה מהאפשרויות הנפוצות ביותר בקובץ התצורה של Vite:

  • שורש. מציין את ספריית הבסיס של הפרויקט.
  • שרת. מגדיר את שרת הפיתוח. הוא כולל אפשרויות להגדרת בקשות המארח, היציאה והפרוקסי ל-API backend.
  • תוספים. מאפשר הוספת תוספים לתהליך הבנייה של Vite. תוסף הוא פונקציה שמשנה את תהליך הבנייה בדרך כלשהי, כגון הוספת תמיכה בפורמט קובץ חדש או שינוי קוד מקור.
  • לִפְתוֹר. זה מגדיר כיצד Vite פותר ייבוא ​​בפרויקט. הוא כולל אפשרויות לציון כינויים, הרחבות וספריות מודולים.

הנה דוגמה לקובץ תצורה של Vite:

יְבוּא { defineConfig } מ'וויט';
יְבוּא נָתִיב מ'נָתִיב';
יְצוּאבְּרִירַת מֶחדָל defineConfig({
 שרת: {
 נמל: 3000,
 לִפְתוֹחַ: נָכוֹן,
 },
 לפתור: {
 כינוי: {
'@': path.resolve (__שם שם, './src'),
 },
 },
 תוספים: [],
});

קובץ תצורה זה מגדיר פרויקט Vite בסיסי עם:

  • שרת פיתוח מקומי הפועל בפורט 3000
  • כינוי ל- src מַדרִיך
  • ללא תוספים

ל-Vite יש קהילה חזקה

מספר משאבים מקוונים מסבירים בפירוט רב כיצד להשתמש ב-Vite עם מסגרות פופולריות כמו React, Vue ו-Angular.

בנוסף, יש שפע של מידע על שימוש יעיל ב-Vite בתיעוד הרשמי שלה. עם משאבים אלה זמינים, שילוב של Vite בפרויקט הבא שלך אפשרי.