איך עורכים חבילת NPM בלי לפבלש

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

אז יש כמה שיטות, נתמקד בשתיים מהם,

שיטה אחת נקראת npm link, שמה שהיא עושה בגדול היא אומרת לnpm הלוקאלי שלנו שפעם הבאה שמישהו צורך את החבילה שלנו, אל תביא את החבילה מהרשת, אלא תביא את החבילה מהמחשב שלנו,

איך עושים את זה:

קודם כל, אתה צריך שהקוד מקור של החבילה תהיה אצלך לוקאלית.

אם לא עשית git clone זה הזמן,

לאחר מכן אתה כותב את הפקודה הבאה בנתיב הראשי של החבילה:

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

בעצם הפקודה הנ"ל לא מביאה את החבילה מהשרת אלא מהמחשב שלנו.

ככה בעצם לא היינו צריכים לפבלש את החבילה לפני שבדקנו שהשינויים שביצענו עובדים בצורה תקינה.

אבל השיטה הזאת יכולה להיות מסוכנת, תחשבו על מקרה בו כבר פיבלשתם את החבילה והכל טוב ויפה, אבל אח"כ ביצעתם שינויים נוספים בחבילה ושכחתם לפבלש מכל סיבה שהיא,

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

אין שום דבר שיזכיר לכם שהחבילה שיושבת לכם ב dependencies ב package.json זה בעצם נלקח מאצלכם, מאיפה שעשיתם npm link,

אז בואו נראה טריק נוסף מגניב:

מהנתיב הראשי של חבילת הNPM שלנו אנחנו מבצעים את הפקודה:

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

אחרי שעשינו את זה נרצה שהפרויקט שמשתמש בחבילה יפנה לקובץ tgz. שיצרנו עכשיו,

לצורך כך נפנה לפרויקט המשתמש בחבילה ונבצע מתוך הנתיב הראשי של הפרוייקט את הפקודות:

מה שעשינו עכשיו, הסרנו את החבילה בגרסה הישנה, והתקנו את החבילה בגרסה הלוקאלית שלה.

כעת שימו לב שבקובץ package.json שלנו אנחנו נראה דבר מוזר:

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

ולא נבזבז זמן יקר על דברים מיותרים.

אבל מה אם אנחנו רוצים לראות בלייב את השינויים בלי צורך לעשות npm pack שייצור לנו קובץ tgz. חדש?

וכאן בא הטריק שישלים את החוויה:

בהנחה שיש לכם ב package.json הגדרה לפקודת ה build שמקמפל לכם את הקוד לגרסאות JS שנתמכות בדפדפן לדוגמא:

אנחנו נפנה לנתיב הראשי של החבילת NPM שלנו ונבצע את הפקודה הבאה:

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

ברכות! אם קראת עד לכאן ויישמת, חסכת הרבה זמן!

אם תרצו לראות איך עושים את זה ומאיפה למדתי אתם מוזמנים לצפות בהרצאה מעניינת של Amnon Sadeh שמדבר על Web components (עוד נושא לפוסט..), בסוף ההרצאה הוא מראה את שני השיטות ואת היתרונות שלהם.

אהבתם? אשמח שתשתפו!