הפיתוח והבאז סביב node.js הביאו מתכנתים רבים לכתוב קוד צד-שרת וכלי סקריפטים ב JavaScript. אחד מאותם מפתחים, אייזק שלוטר, הבין מהר מאוד שהתקנה ידנית של חבילות זה תהליך די מתסכל ודרוש כלי אוטומטי דרכו כל אחד יוכל לכתוב חבילת קוד ולהפיץ אותה לחברים. אז הוא פיתח כלי כזה וקרא לו npm, שזה קיצור ל node package manager ומהר מאוד כולם באמת התחילו לכתוב ולהפיץ חתיכות קוד JavaScript לחברים.

היום יש במאגר של npm מעל 240 אלף חבילות וקצב גידול של כ 400 חבילות חדשות ביום. לצורך השוואה המאגר המקביל של פייתון כולל כ 75 אלף חבילות וגדל בקצב של 70 חבילות ביום. זה המון קוד לשלב בפרויקטים שלכם.

לא כל הקוד במאגר npm מתאים לריצה בצד הלקוח, אבל הרבה ממנו כן. אם אתם כבר משתמשים ב Webpack תשמחו לשמוע שההמרה מקוד JavaScript שמתאים ל node, לקוד JavaScript עבור דפדפן כבר כלולה בתוך הכלי. נתחיל בדוגמת קוד קצרה ואחריה אפשר לדבר על היתרונות והחסרונות בשימוש ב npm להתקנת חבילות קוד צד-לקוח.

1. איך זה עובד

בשילוב עם webpack החיים די פשוטים. נניח שתרצו לשלב את jQuery בקוד שלכם, אז במקום להביא את קובץ ה js מהרשת או לקשר ל CDN תוכלו להשתמש ב npm ולרשום משורת הפקודה:

npm install jquery

לאחר מכן מכל קובץ JavaScript בתוכנית תוכלו לטעון את jQuery עם השורה:

var $ = require('jquery');

$('body').css('background', 'orange');

מוזמנים לנסות במכונה הוירטואלית הבאה הריצו npm install jquery ולאחר מכן ./server.sh כדי להפעיל את השרת. לאחר מכן לחצו על אייקון כדור הארץ כדי לראות את העמוד שבניתם. קוד התוכנית נמצא בקובץ src/main.js ותוכלו לראות אותו בלחיצה על תיבת הצד במכונה:

2. למה npm זה רעיון טוב

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

יתרון נוסף מתגלה בשדרוגים. מתי בפעם האחרונה שדרגתם תלויות בספריות JavaScript? תנו לי לנחש שעבר די הרבה זמן. שינוי הפניות ב HTML או חיפוש והורדת גירסא חדשה יותר של ספריה זה מהדברים שאף פעם אין זמן לעשות.

3. למה npm זה רעיון רע

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

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

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

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