הרבה זמן חשבתי לעשות את זה והנה זה קורה..
מקווה שאמצא את הזמן תמיד לשתף את הידע שלי כאן,
לפעמים בנושאים יותר טכנים ולפעמים בשאלות קריירה שנקרות בדרכינו,
יש המון מידע שמתגלגל לנו בקבוצות הוואצאפ וקשה לשמר את הידע הזה לאורך זמן,
חשבתי שכאן יהיה יותר קל לשמור על המידע ולסדר אותו לפי נושאים
אז מה אתם אומרים? נתחיל?
טריק פשוט ונוח לעבודה עם שינוי בחבילת npm ששייכת לך ואתה רוצה לראות את השינויים בפרויקט שמשתמש בחבילה ללא צורך בפיבלוש החבילה.
אז יש כמה שיטות, נתמקד בשתיים מהם,
שיטה אחת נקראת npm link, שמה שהיא עושה בגדול היא אומרת לnpm הלוקאלי שלנו שפעם הבאה שמישהו צורך את החבילה שלנו, אל תביא את החבילה מהרשת, אלא תביא את החבילה מהמחשב שלנו,
איך עושים את זה:
קודם כל, אתה צריך שהקוד מקור של החבילה תהיה אצלך לוקאלית.
אם לא עשית git clone זה הזמן,
לאחר מכן אתה כותב את הפקודה הבאה בנתיב הראשי של החבילה:
npm link
לאחר מכן אנחנו הולכים לנתיב הראשי של הפרוייקט שמשתמש בחבילה וכותבים את הפקודה:
npm install my-package
בעצם הפקודה הנ"ל לא מביאה את החבילה מהשרת אלא מהמחשב שלנו.
ככה בעצם לא היינו צריכים לפבלש את החבילה לפני שבדקנו שהשינויים שביצענו עובדים בצורה תקינה.
אבל השיטה הזאת יכולה להיות מסוכנת, תחשבו על מקרה בו כבר פיבלשתם את החבילה והכל טוב ויפה, אבל אח"כ ביצעתם שינויים נוספים בחבילה ושכחתם לפבלש מכל סיבה שהיא,
ופתאום אתם רואים שאותה חבילה מתנהגת בצורה שונה מאיך שזה עובד בפרודקשן או על מחשב של חבר..
אין שום דבר שיזכיר לכם שהחבילה שיושבת לכם ב dependencies ב package.json זה בעצם נלקח מאצלכם, מאיפה שעשיתם npm link,
אז בואו נראה טריק נוסף מגניב:
מהנתיב הראשי של חבילת הNPM שלנו אנחנו מבצעים את הפקודה:
npm pack
מה שהפקודה מייצרת זה בעצם קובץ עם סיומת tgz. שזה בעצם איך שnpm אורז לנו את החבילה כדי שנוכל לצרוך אותה בכל מקום.
אחרי שעשינו את זה נרצה שהפרויקט שמשתמש בחבילה יפנה לקובץ tgz. שיצרנו עכשיו,
לצורך כך נפנה לפרויקט המשתמש בחבילה ונבצע מתוך הנתיב הראשי של הפרוייקט את הפקודות:
npm uninstall my-package npm install '../[הנתיב של החבילה]/my-package.tgz'
מה שעשינו עכשיו, הסרנו את החבילה בגרסה הישנה, והתקנו את החבילה בגרסה הלוקאלית שלה.
כעת שימו לב שבקובץ package.json שלנו אנחנו נראה דבר מוזר:
"dependencies": {
"my-package": 'file:../[הנתיב של החבילה]/my-package.tgz'
}
ככה אנחנו יודעים לפני שאנחנו שומרים את השינויים שאנחנו ניגשים לגרסה מקומית של החבילה,
ולא נבזבז זמן יקר על דברים מיותרים.
אבל מה אם אנחנו רוצים לראות בלייב את השינויים בלי צורך לעשות npm pack שייצור לנו קובץ tgz. חדש?
וכאן בא הטריק שישלים את החוויה:
בהנחה שיש לכם ב package.json הגדרה לפקודת ה build שמקמפל לכם את הקוד לגרסאות JS שנתמכות בדפדפן לדוגמא:
"scripts": { "build": 'tsc' }
אנחנו נפנה לנתיב הראשי של החבילת NPM שלנו ונבצע את הפקודה הבאה:
npm run build --watchכעת, כל שינוי שנבצע בקוד של החבילה יתעדכן אוטומטית בפרוייקט שמשתמש בחבילה שלנו!
ברכות! אם קראת עד לכאן ויישמת, חסכת הרבה זמן!
אם תרצו לראות בלייב איך זה עובד ומתי נצטרך את זה מוזמנים לצפות בהרצאה הזאת: (מדקה 36)
זהו להיום,
אשמח לתגובות מה אתם חושבים על מה שכתבתי
ועוד יותר אשמח לשיתופים😃
