LogoMakr_1Ly6VT.png
  • בית

  • אירועים

  • הפודקאסט

  • הצטרף

  • הפורום המקצועי החדש

  • לימוד אנגלית

  • לוח משרות

  • מתנדבים

  • DDoS Code Review

  • סדנת מציאת עבודה בהייטק

  • יזמות

  • DZone - מועדון הצרכנות

  • מועדון VIP

  • עוד..

    Use tab to navigate through the menu items.
    כדי לראות את זה בפעילות, יש לעבור לאתר הפעיל שלך.
    • כל הפוסטים
    • קטגוריות
    • הפוסטים שלי
    Meni Maatuf
    01 בספט׳ 2020

    סדרת הטיפים שלי - והפעם עבודה עם חבילות NPM שלנו

    ב- כללי

    הרבה זמן חשבתי לעשות את זה והנה זה קורה..

    מקווה שאמצא את הזמן תמיד לשתף את הידע שלי כאן,

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

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

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

    אז מה אתם אומרים? נתחיל?


    טריק פשוט ונוח לעבודה עם שינוי בחבילת 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)


    www.youtube.com
    One Component to Rule Them All with Amnon Sadeh (Hebrew)

    זהו להיום,

    אשמח לתגובות מה אתם חושבים על מה שכתבתי

    ועוד יותר אשמח לשיתופים😃

    0 תגובות
    תגובות
    0 תגובות
    DDos developers
    community

    info@ddosdevs.co.il

    בני ברק, ישראל

    ​

    ​

    • LinkedIn
    • White YouTube Icon
    • White Facebook Icon

    ©2022 by DDoS developers community created with wix.com