אדיר קנדל

תגיות פופולריות

הרשמה לניוזלטר

מה זה Vite? ואיך הוא משנה את עולם הפיתוח?

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

למעשה הוא משמש כתחליף לWebpack, כלי מאוד פופולרי שרובנו משתמשים בו בצירוף פלאגינים שונים שעוזרים לקוד להיות רזה יותר כמו מיניפיקציה, תאימות לדפדפנים בעזרת Babel וכמובן עיבוד קבצי סטיילינג כמו css, scss, less, postcss ועוד…

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

As I was going to bed, I had an idea about a no-bundler dev setup (using native browser ES imports), but with support for Vue SFCs **with hot reload**. Now it's almost 6AM and I have PoC working. The hot reload is so fast it's near instant.
— Evan You (@youyuxi) April 20, 2020

מה Vite מנסה להשיג?

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

הכלי משתמש ב- ES Modules, טכנולוגיה שזוכה לתמיכה נייטיבית רחבה בדפדפנים המודרניים (כלומר חוץ מ- IE 🤷🏻‍♂️),
כך שאין צורך בביזבוז זמן ומשאבים של המכונה על עיבוד קבצים עם הצהרות של import / export, משום שהדפדפנים כבר תומכים בזה.

בנוסף Vite יודע לחלק את הפרויקט לשני חלקים:

Dependencies – הם חלקי קוד כמו ספריות npm שבשימוש לאורך הפרויקט, אך לא משתנים לעיתים תכופות.
אלה יכולים להיות משאב שמכביד על פעולת בניית הקוד ולכן Vite משתמשת בספריית esbuild הכתובה בשפת Go שעושה עיבוד מקדים לאותם Dependencies בצורה שהיא 10-100 פעמים מהירה יותר ממעבדים הכתובים ב- JavaScript.
Source code – הוא קוד המקור שלנו שאותו נשנה ונעדכן רבות ואף כתוב בצורות וקבצים שונים כדוגמת קבצי ts, .jsx/.tsx, .vue אותם Vite יהפוך ל- ES modules לשימוש בדפדפן.

בזכות טעינת הקוד דרך ES modules מנגנון ה- HMR (Hot Module Reload), שטוען את השינויים בקוד אוטומטית לדפדפן מבלי לרענן את העמוד, הוא הרבה יותר מהיר.

כלי העיבוד כבר לא צריך לבנות חלקים גדולים של הקוד מחדש בכל שינוי קטן, הדפדפן מכיר את החלוקה עפ״י ה- ES modules וטוען רק את ה- Module שהשתנה.

התקנה ושימוש

כדי ליצור את הפרויקט מאפס כל מה שאתם צריכים הוא להריץ –

npm init vite@latest

Vite תומכת בכמה תבניות מוגדרות מראש עבור כלים שונים –

vanilla
vanilla-ts
vue
vue-ts
react
react-ts
preact
preact-ts
lit
lit-ts
svelte
svelte-ts

תוכלו לבחור באחת האופציות בצורות הבאות –

# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm init vite@latest my-vue-app -- --template vue

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

{
  "scripts": {
    "dev": "vite", // start dev server, aliases: `vite dev`, `vite serve`
    "build": "vite build", // build for production
    "preview": "vite preview" // locally preview production build
  }
}

אם תרצו לדעת אילו אופציות ניתן להוסיף לאותן הפקודות פשוט תריצו npx vite --help בטרמינל.

מבנה של פרויקט

לצורך ההדגמה יצרתי פרויקט Vite עם React וזה המבנה המתקבל –

├── index.html
├── package.json
├── src
│   ├── App.css
│   ├── App.jsx
│   ├── favicon.svg
│   ├── index.css
│   ├── logo.svg
│   └── main.jsx
└── vite.config.js

קובץ ה- index.html הוא הקובץ שממנו מוגש האתר, שם ניתן לראות ש main.jsx מוגש כ- script module.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

קובץ הקונפיגורציות – vite.config.js – נראה מאוד פשוט וכולל בתוכו סך הכל פלאגין לריאקט.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()]
})

וזה לא הכל, אם תרצו להפוך את קבצי הסטייל שלכם ל- .scss, כל שעליכם לעשות הוא להתקין את ה- pre-proccessor הרצוי (שבמקרה הזה הוא sass) npm install -D sass.

שאר התמיכה כבר מגיעה built-in, אין צורך בפלאגינים ספציפיים.

פלאגינים פופולריים

vite-plugin-pwa

פלאגין שנותן קונפיגורציה פשוטה מאוד לאפליקציות PWA עם אפס מאמץ.

npm i vite-plugin-pwa -D

הוסיפו את זה לקובץ הקונפיגורציות.

// vite.config.js
import { VitePWA } from 'vite-plugin-pwa'

export default {
  plugins: [
    VitePWA({
      manifest: {
       // content of manifest
      },
      workbox: {
      // workbox options for generateSW
      }
    })
  ]
}

vite-plugin-windicss

פלאגין שמנגיש את Tailwind CSS על פי דרישה, למעשה הוא סורק את הפרויקט ויוצר את הקוד שאתם צריכים לפיו.

npm i vite-plugin-windicss -D

// vite.config.js
import WindiCSS from 'vite-plugin-windicss'

export default {
  plugins: [
    WindiCSS()
  ],
};

// main.js
import 'windi.css'

vite-plugin-tauri

הפלאגין הזה עוזר לכם ליצור אפליקציית חוצת פלטפורמות עם Tauri.

npm i -D vite-plugin-tauri

// package.json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
+   "vite-tauri": "vite-tauri",
  }
}

vite-plugin-compression

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

npm i vite-plugin-compression -D

// vite.config.js
import viteCompression from 'vite-plugin-compression';

export default () => {
  return {
    plugins: [viteCompression()],
  };
};

תוכלו למצוא עוד המון פלאגינים ותוספים בריפו של awesome-vite.

אדיר קנדל

תגיות פופולריות

הרשמה לניוזלטר

הרשמה לניוזלטר

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

מה זה Vite? ואיך הוא משנה את עולם הפיתוח?

מה Vite מנסה להשיג?

התקנה ושימוש

מבנה של פרויקט

פלאגינים פופולריים

vite-plugin-pwa

vite-plugin-windicss

vite-plugin-tauri

vite-plugin-compression

שלום לך נעים להכיר.

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

רוצים לקבל מאיתנו עדכונים?

הרשמה לניוזלטר

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