קוראים כמוך עוזרים לתמוך ב-MUO. כאשר אתה מבצע רכישה באמצעות קישורים באתר שלנו, אנו עשויים להרוויח עמלת שותף. קרא עוד.

Vite v4.0.4 שוחרר ב-3 בינואר 2023 ומשפר את הפונקציונליות של סביבת הפיתוח של Vite ומגיע רק חמישה חודשים לאחר Vite 3. הגרסה החדשה מגיעה עם תכונות ועדכונים חדשים שיהפכו את חווית הפיתוח של JavaScript למהירה וחזקה יותר מבעבר.

כאן, נדון מהו Vite, התכונות והעדכונים המשמעותיים שנמצאים ב-Vite 4.

מה iI Vite?

המילה "וויט" עצמה פירושה "מהיר". זהו כלי בנייה חזיתי ושרת פיתוח שנועד לספק חווית פיתוח מהירה, קלת משקל ופשוטה יותר. זה משרת את הקוד שלך במהלך הפיתוח, מאגד את הקבצים שלך לייצור ומאפשר אינטגרציה קלה עם מגוון מסגרות וספריות JavaScript, כגון Vue, React, Preact ו-Svelte.

וייט עבר שיפורים רבים בשנתיים האחרונות, ו-Vite 4 מביא מספר תכונות חדשות ומשופרות.

1. רולאפ 3

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

Vite משתמש כעת ב-Rollup 3 במהלך זמן הבנייה. Vite גרסה 3 השתמשה ב-Rollup 2 אך לאחר שחרורו של Rollup 3 באוקטובר 2022, הגרסה החדשה של Vite הגיעה עם שדרוג גדול ל-Rollup 3.

instagram viewer

עליך לעיין במדריך ההעברה של האוסף לפני השדרוג לאוסף 3, מכיוון שבעיות עלולות להתרחש, למרות שאוסף 3 תואם לרוב לאוסף 2.

2. תוסף React חדש באמצעות מהדר אינטרנט מהיר (SWC)

SWC הוא מהדר JavaScript מהיר במיוחד שנכתב ב- Rust. SWC ו בבל שניהם מהדרים של JavaScript שהופכים את הקוד שלך למה שנתמך על ידי דפדפנים אבל SWC טענה שהוא מהיר יותר מבבל.

מכיוון ש-Vite v3 השתמש ב-Babel, v4 מגיע עם הצגת SWC כתחליף או חלופה, במיוחד עבור פרויקטים של React.

בעוד Vite ממשיך לתמוך ב-Babel, Vite 4 מציג שני תוספים (vitejs/plugin-react ו-vitejs/plugin-react-swc) עם פשרות שונות עבור פרויקטי React.

הפלאגין vitejs/plugin-react

תוסף זה מספק החלפה מהירה של Hot Module תוך שימוש בגודל חבילה מינימלי, באמצעות esbuild ו-Babel. זה גם מציע את הגמישות הנוספת של היכולת להשתמש בצינור הטרנספורמציה של Babel.

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

npm התקן את @vitejs/plugin-react

עקוב אחר הקוד שלהלן כדי לייבא את הפלאגין לפרויקט שלך;

יְבוּא { defineConfig } מ'וויט'
יְבוּא לְהָגִיב מ'@vitejs/plugin-react'
יְצוּאבְּרִירַת מֶחדָל defineConfig({
תוספים: [לְהָגִיב()],
})

הפלאגין vitejs/plugin-react-swc

זהו תוסף חדש שעושה שימוש ב-esbuild במהלך הבנייה, וב-Speed ​​Web Compiler במהלך הפיתוח.

על ידי החלפת Babel ב-SWC, התוסף שואף להאיץ משמעותית את תהליך הפיתוח, במיוחד עבור פרויקטים שאינם דורשים הרחבות לא סטנדרטיות של React.

הנה איך להתקין את התוסף;

npm i @vitejs/plugin-react-swc

ייבא אותו לפרויקט שלך באופן הבא;

יְבוּא { defineConfig } מ"וויט";
יְבוּא לְהָגִיב מ"@vitejs/plugin-react-swc";
יְצוּאבְּרִירַת מֶחדָל defineConfig({
תוספים: [לְהָגִיב()],
});

3. ייבוא ​​CSS כמחרוזת

תכונה זו נותנת פתרון להתנהגות טעינה כפולה של Vite 3 CSS המתרחשת על ידי ייבוא ​​ייצוא ברירת המחדל של קובץ CSS, למשל:

יְבוּא cssString מ'./global.css

כדי למנוע התנהגות זו, Vite 4 מציג את השימוש ב-?מתקן סיומת שאילתה מוטבעת. הנה הדגמה של התחביר;

יְבוּא cssString מ'./global.css? בשורה'

לפיכך, ייצוא ברירת המחדל של v3 CSS הוצא משימוש.

4. משתני סביבה

Vite עדכנה את התלות שלו ב-dotenv וב-dotenv-expand. הגרסאות החדשות בשימוש הן dotenv 16 ו-dotenv-expand 9, בהתאמה. עדכון זה ידרוש ממך לעטוף ערכים הכוללים את התווים "#" או "`" במרכאות כדי להבטיח פונקציונליות תקינה. הנה דוגמא;

SECRET_HASH="משהו-עם-א-#-בְּלִיל"

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

שדרוגים אחרים, תיקונים והעברה ל-Vite v4.0.4

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

מבנה הדפדפן המודרני מכוון כעת גם ל-safari14 כברירת מחדל לתאימות ES2020 רחבה יותר. יש תמיכה בחבילת תיקון בעת ​​תלות מקדימה של צרור, יש הודעות שגיאה משופרות במהלך SSR ועוד הרבה יותר.