מבוא ל-Node.js ול-npm

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

Node.js - ג'אווהסקריפט מחוץ לדפדפן

עד 2009, ג'אווהסקריפט רצה רק בדפדפן. Node.js שינה את זה - הוא לקח את מנוע ה-JavaScript של כרום (V8) והפך אותו לזמין להרצה על המחשב עצמו, בלי דפדפן בכלל. זה אומר שאפשר לכתוב ג'אווהסקריפט שקוראת קבצים, מריצה שרתים, ומתקשרת עם מסדי נתונים - דברים שדפדפן, מסיבות אבטחה, פשוט לא מרשה לג'אווהסקריפט לעשות.

// קובץ hello.js
console.log("שלום מ-Node.js");

node hello.js
# שלום מ-Node.js

בעולם ריאקט, Node לא בהכרח מריץ את האתר עצמו בפרודקשן - הוא מריץ את הכלים שבונים את האתר. כשכותבים npm run dev או npm run build, Node הוא מה שמריץ את התהליך הזה מאחורי הקלעים.

npm - מנהל החבילות

npm (Node Package Manager) הוא הכלי שמגיע יחד עם Node, ומטפל בהתקנה של ספריות חיצוניות שאחרים כתבו - ריאקט עצמו, כלי בנייה, ספריות עזר. במקום לכתוב הכל מאפס, מורידים חבילה שכבר פתרה את הבעיה.

npm install react

הפקודה הזאת מורידה את החבילה react ואת כל מה שהיא תלויה בו, ושמה אותם בתיקייה בשם node_modules.

package.json - כרטיס הזהות של הפרויקט

כל פרויקט Node מתחיל בקובץ package.json, שמתעד מידע בסיסי על הפרויקט וברשימת כל החבילות שהוא תלוי בהן.

{
  "name": "my-react-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

• dependencies - חבילות שהאפליקציה צריכה כדי לרוץ בפועל, כמו ריאקט עצמו.
• devDependencies - חבילות שנחוצות רק בזמן פיתוח, כמו כלי בדיקות או linting.
• scripts - פקודות מקוצרות שמריצים עם npm run <שם>, במקום לזכור פקודות ארוכות ומסובכות.

node_modules - התיקייה שאף אחד לא פותח ידנית

כשמתקינים חבילות, npm שם אותן בתיקייה node_modules, שיכולה להכיל אלפי קבצים גם בפרויקט קטן, כי כל חבילה מביאה איתה את החבילות שהיא עצמה תלויה בהן. חוק ברזל - אף פעם לא עורכים קבצים בתוך node_modules ידנית, ואף פעם לא מעלים אותה ל-Git. במקום זה, package.json שומר את רשימת החבילות הדרושות, וכל מי שמוריד את הפרויקט מריץ npm install כדי לבנות מחדש את node_modules אצלו.

package-lock.json - נעילת גרסאות מדויקות

לצד package.json יש קובץ נוסף, package-lock.json, שנוצר אוטומטית ומתעד את הגרסה המדויקת של כל חבילה וכל תת-תלות שהותקנה. זה מבטיח שכל מי שמריץ npm install על אותו פרויקט מקבל בדיוק אותן גרסאות, ולא גרסה חדשה שיצאה אתמול ושברה משהו. גם את הקובץ הזה מעלים ל-Git, בניגוד ל-node_modules.

הפקודות שתשתמשו בהן הכי הרבה

npm install          # מתקין את כל החבילות שמופיעות ב-package.json
npm install axios    # מוסיף ומתקין חבילה ספציפית
npm run dev          # מריץ את הסקריפט dev, בדרך כלל שרת פיתוח
npm uninstall axios  # מסיר חבילה

למה זה חשוב במיוחד למי שלומד ריאקט

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

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

לסיכום

Node.js מריץ ג'אווהסקריפט מחוץ לדפדפן, ובעולם ריאקט הוא בעיקר מריץ את כלי הפיתוח והבנייה. npm הוא מנהל החבילות שמתקין ספריות דרך package.json, ושומר גרסאות מדויקות ב-package-lock.json. אלה הכלים הבסיסיים ביותר שכל פרויקט פרונטאנד מודרני נשען עליהם.

מתקשים להבין שגיאת npm שקיבלתם? תשתפו אותה בדיסקורד.

הצטרפו לקהילה בדיסקורד