מה קורה כשמריצים פקודות npm?

לוחצים Enter על פקודת npm. הפרויקט נבנה. זה מרגיש כמו קסם.

זה לא קסם. זו סדרה של בקשות רשת, ניתוח קוד (parsing) ואופטימיזציה של קבצים.

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

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

  1. npm install

הפקודה הזו קוראת את קובץ ה-package.json שלך. היא פונה ל-cloud registry כדי למצוא את הגרסאות המתאימות של הכלים שלך.

  • היא מורידה חבילות (packages) מה-registry.
  • היא יוצרת את תיקיית node_modules.
  • היא בונה עץ תלויות (dependency tree).
  • היא מעדכנת את package-lock.json כדי לתעד את הגרסאות המדויקות.
  1. npm run format:check

זהו שלב אימות. הוא בודק אם הקוד שלך עומד בחוקי הסגנון (style rules) שלך מבלי לשנות דבר.

  • הוא בונה פריסה וירטואלית של הקבצים שלך.
  • הוא משווה את הקבצים שלך מול חוקים כמו Prettier.
  • הוא מסמן שגיאות אם הרווחים או התחביר (syntax) שלך שגויים.

כדי לתקן את השגיאות הללו, הריצו npm run format. פקודה זו משתמשת ב-Prettier כדי לכתוב מחדש את הקבצים שלכם בסגנון הנכון.

  1. npm run lint

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

  • הוא מוצא שגיאות תחביר (syntax errors).
  • הוא מזהה משתנים שלא נעשה בהם שימוש.
  • הוא מזהה imports חסרים.
  • הוא מסמן שימוש לא נכון ב-React Hook.
  1. npm run build

הפקודה הזו מכינה את האפליקציה שלכם לעולם האמיתי. היא יוצרת תיקיית dist.

  • היא משתמשת ב-bundler כדי לבצע tree shaking. פעולה זו מוחקת קוד שייבאתם אך מעולם לא השתמשתם בו.
  • היא מבצעת minification. פעולה זו מסירה רווחים לבנים (whitespace) ומשנה שמות של מש

הקסם שמתחת לטרמינל: מה באמת קורה כשמריצים פקודות npm

האם תהיתם פעם מה קורה מאחורי הקל