תחי ישראל -אין לנו ארץ אחרת

מפתח frontend, על bower שמעת?

מחבר:

בתאריך: 22.07.2016

אם אתה מפתח frontend ולא שמעת על bower, אז חשוב שתכיר. כי bower הוא מנהל חבילות שיכול לחסוך לך הרבה זמן.
ואם שמעת אבל לא היה לך זמן ללמוד, אז הגעת למקום הנכון כדי ללמוד את הכלי שכל מפתח פרונטאנד בימינו חייב להכיר.

מי צריך את bower?

אתר אינטרנט מודרני דורש הרבה דברים בצד הקליינט. פריימוורקים (דוגמת angularjs ו-jQuery), ספריות (דוגמת bootstrap), והמון פלגאינים שבמקרים רבים תלויים בפלגאינים אחרים לפעולתם. ככל שהאתר גדול ומסובך יותר, כך נזדקק ליותר חבילות קוד, אז כדי לחסוך חלק (גדול) מכאב הראש שבהורדת והתקנת כל החבילות שהאתר צריך בצד הקליינט, מקובל בימינו להשתמש במנהל החבילות-bower.

bower יכול להוריד את כל חבילות הקוד, ואת כל החבילות שבהם הם תלויות (לדוגמה, כשמורידים פלגאין של bower, jQuery יוריד אותו עם ספריית jQuery), ולעדכן את החבילות או למחוק אותם בשורת קוד אחת.

bower עובד משורת הפקודות, והוא מבוסס node.js.

במדריך זה אדגים כיצד להשתמש ב-bower להתקנה, עדכון ומחיקה של חבילות javascript. אותו תהליך יכול לעבוד גם עם סקריפטים של css.

אתר bower מנהל חבילות הקוד באינטרנט

התקנת node.js ו-npm

כדי שנוכל לעבוד עם bower נצטרך קודם להתקין node.js על המחשב.

את node.js מתקינים בקלות רבה מהקישור הבא: להורדת node.js.
כשמתקינים את npm, node.js מותקן גם הוא באופן אוטומטי.

2. התקנת bower

אחרי שהתקנו את node.js, נתקין את bower באופן גלובלי משורת הפקודות.


> npm install -g bower

אחרי שהתקנו באופן גלובלי, נתקין את bower באופן מקומי בתיקיית האתר שלנו.

בדוגמה, את ההתקנה נבצע בתיקיית app, התיקייה שבה נמצאים הסקריפטים של javascript באתר שלנו.

ננווט לתיקיית app בתיקיית my-website.


> cd my-website/app/

ונאתחל את bower מתוך תיקיית app.


> bower init

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

אחרי שסיימנו עם האשף, יופיע בתיקיית app הקובץ bower.json, שבתוכו ינהל bower רישום של החבילות שהותקנו באמצעותו.

כך זה נראה הקובץ bower.json באתר שלי:


{
  "name": "app",
  "authors": [
    "reshetech"
  ],
  "description": "",
  "main": "",
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

3. חיפוש חבילה

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

לדוגמה, אני מעוניין להתקין את הפריימוורק jQuery, ולפיכך אקליד בשורת הפקודות את הפקודה הבאה שמחפשת חבילות שמכילות jquery בשמם:


> bower search jquery

התוצאה תהיה שמות החבילות שמכילות jquery, ומזה ניקח את שם החבילה שבה אנחנו מעוניינים, שהיא 'jquery'.

4. התקנת חבילה באמצעות bower

משורת הפקודות, נתקין את החבילות שבהם אנחנו מעוניינים. לדוגמה, אם אנחנו מעוניינים להתקין את הספריות jQuery ו-Angular, נקליד את השורה הבאה בשורת הפקודות.


> bower install jquery angular --save

לחיצה על enter, מעדכנת את רישום התלויות בקובץ bower.json, ובנוסף החבילות (עם הספריות הנוספות שבהם הם תלויות) יותקנו בתיקיית bower_components.

נקליד את הפקודה הבאה לשורת הפקודות כדי לראות את הגרסאות של כל החבילות שהתקנו.


> bower list

5. כיצד להשתמש בחבילות שהתקנו באמצעות bower?

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


> bower list --path

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


angular: 'bower_components/angular/angular.js',
jquery: 'bower_components/jquery/dist/jquery.js'

בנתיבים שקיבלנו נשתמש בתור ה-src של הסקריפטים בדף ההטמ"ל.

לדוגמה:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <script src="app/bower_components/angular/angular.js"></script>
    <script src="app/bower_components/jquery/dist/jquery.js"></script>
</body>
</html>

6. כיצד לעדכן חבילה?

לדוגמה, כדי לעדכן את את החבילה ששמה jquery, נשתמש בפקודה הבאה.


> bower update jquery

וכדי לראות מהי הגרסה של החבילות המותקנות באתר, נשתמש בפקודה bower list משורת הפקודות.


> bower list

וזה יראה לנו את גרסאות החבילות המותקנות.

7. כיצד להסיר חבילה?

כדי להסיר חבילה, נשתמש בפקודה bower uninstall משורת הפקודות.

לדוגמה, נשתמש בפקודה הבאה כדי להסיר את angularJS.


> bower uninstall angular --save

8. כיצד להעביר אתרים?

כשמעבירים אתרים, לדוגמה כשמעלים ל-github, אין צורך להעביר את האתר עם כל החבילות בתיקיית bower_components. מספיק להעביר את הקובץ bower.json, שמכיל את רשימת כל החבילות, ואז ניתן להתקין את כל החבילות במיקום החדש באמצעות הקלדת הפקודה הבאה בשורת הפקודות.


> bower install

לסיכום

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

ניתן לקרוא את התיעוד המלא באתר bower.io

מדריכי JavaScript למתקדמים

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים

נכתב ע"י יוסי בן הרוש

מתכנת אתרי אינטרנט, מומחה Laravel ו-Angular, והכותב של כל התכנים ב רשתטק תכנות אתרי אינטרנט

לכל המדריכים >>

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

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

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

המשתמש באתר צריך להיות מודע לכך שאם וכאשר הוא מפתח קוד בשביל פרויקט הוא חייב לשים לב ולהשתמש בסביבת הפיתוח המתאימה ביותר, הבטוחה ביותר, היעילה ביותר וכמובן שהוא צריך לבדוק את הקוד בהיבטים של יעילות ואבטחה. מי אמר שלהיות מפתח זו עבודה קלה ?

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