נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

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

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

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

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

מחבר:
בתאריך:

אם אתה מפתח 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

הוסף תגובה חדשה

 

= 8 + 3

תמונת המגיב

מתן בתאריך: 03.05.2017

בדיוק מה שחיפשתי, ועוד בעברית. תודה רבה.

תמונת המגיב

יוסי בן הרוש בתאריך: 03.05.2017

בכיף, מתן.