مدیریت منابع Front-End با Bower

مدیریت منابع Front-End با Bower

Bower یک ابزار مدیریت بسته است که توسط توییتر ساخته شده. خوب حالا این به چه معنی است؟ همانطور که می دانیم ابزارهای مدیریت بسته در همه جا وجود دارد. به عنوان مثال: Composer برای پی اچ پی، npm برای Node و RubyGems برای Ruby. اگر تجربه کافی کار با این ابزارها را نداشته باشیم، می تواند گیج کننده باشد.

 

چرا از Bower استفاده کنیم؟

 

دلایل زیادی برای استفاده از package-manager مثل Bower وجود دارد.

 

  • اگر شما خسته از این می باشید که پکیج های مورد نیاز خود را بطور دسته پیدا و دانلود کرده و آنها را به پروژه خود اضافه کنید.
  • اگر می خواهید یک نسخه خاص از یک بسته یا منبع در پروژه خود داشته باشید.
  • اگر می خواهید به راحتی با یک روش ساده تمام بسته های مورد نیاز را دریافت کنید.

 

مثال سریع

 

معلومه که ویژگی های بالا جالب به نظر می رسد. اما چطور کار می کند؟ بیایید فرض کنیم می خواهید کتابخانه jQuery را به پروژه جاری خود اضافه کنیم.

 

راه طبیعی این است که: به سایت jQuery.com رفته و لینک دانلود را پیدا، بر روی لینک کلیک کرده، از حالت فشرده خارج کرده و آنگاه آن را به به داخل پروژه درگ کنیم. معلومه که از CDN هم می توانید استفاده کنید. اما همچنان باید URL را پیدا کنیم

 

راه حل Bower این است: bower install jquery. تنها کافی است آن را در خط فرمان خود تایپ کرده تا منبع jQuery در پوشه bower_components در پروژه قرار گیرد.

 

 

نصب Bower

 

برای استفاده از bower نیاز به نصب Node.js و npm داریم. npm مخفف (Node’s package manager) می باشد که همراه با Node.js نصب می شود. کار را ادامه دهید و Node را دانلود و نصبش کنید.

 

می توانید با دستور node -v و  npm -v نسخه نصب شده را مشاهده کنید تا مطمئن شوید هر دو به درست نصب شده اند:

 

node-npm-version

 

هنگامی که node و npm را نصب کردید، حال نیاز داریم که bower را نصب کنیم. از آنجایی آن یک بسته npm می باشد، به راحتی با دستور زیر قابل نصب است:

 

 

حال Bower نصب شد! پارامتر g- باعث می شود Bower بطور کلی یا global نصب شود، یعنی از هر جای سیستم قابل دسترس باشد.

 

 

کاربران ویندوز برای استفاده درست از Bower نیاز به نصب msysgit دارند. برای اطلاعات بیشتر به bower docs مراجعه کنید.

 

با نصب Bower، حال می توانیم از آن استفاده کنیم.

 

نصب بسته ها

 

حال به راحتی با استفاده از <bower install <package می توانیم بسته مورد نظر را نصب کنیم. به عنوان مثال، شما می توانید این کار را برای بسته های زیر انجام دهید:

 

  • jQuery
  • Angular
  • Font Awesome
  • Animate.css 
  • و غیره …

 

شما می توانید با نام بسته (jquery)، یک مخزن git مثل (git://github.com/someone/some-package.git) یا حتی یک مخزن مختصر در github مثل (username/package-name) بسته های خود را نصب کنید.

 

نصب یک نسخه خاص

 

اگر نیاز به یک نسخه خاص از بسته دارید، می توانید با شماره نسخه نصب کنید:

 

 

این کار باعث می شود یک نسخه خاص از پکیچ در پروژه شما قرار گیرد.

 

جستجو در بسته ها

 

اگر شما مطمئن نیستید بسته مورد نظر نصب شده است یا نه، تنها کافی است <bower search <package name را تایپ کنید. اگر هم می خواهید لیست بسته ها را مشاهده کنید دستور bower list را تایپ کنید.

حالا که با ویژگی ها اساسی bower آشنا شدیم، بیایید ببینیم چطور می توان در یک پروژه واقعی از آن استفاده کنیم.

شما همچنین می توانید وب سایت bower components که شامل بسته هایی می باشد را مشاهده کنید.

 

bower-components-site

 

راه اندازی باوئر برای یک پروژه

 

برای استفاده از Bower در پروژه خود، به دو فایل نیاز داریم:

 

  • bowerrc. فایلی که به باوئر می گوید فایل ها را کجا نصب کند.
  • bower.json فایل که به باوئر می گوید چه بسته هایی ما نیاز داریم.

 

تعریف دایرکتوری باوئر

 

دایرکتوری پیشفرضی که bower بسته ها را در آن نصب می کند bower_components است. برای تغییر دایرکتوری پیشفرض نیاز به ساخت فایل bowerrc. داریم:

 

 

حال، این کار باعث می شود پکیج های ما در داخل پوشه libs نصب شوند. حالا اجازه دهید در مورد نصب چندین بسته در یک زمان صحبت کنیم.

 

نصب بسته های چندگانه

 

معمولا منبع ها یا بسته هایی که در پروژه خود استفاده می کنیم بیش از یک منبع هستند. تایپ bower install براش تک تک بسته ها روش مناسبی نیست.

راه حل مناسب این است که یک فایلی را تعریف کنیم و نام تمام بسته های مورد نظر خود را وارد کنیم. این چیزی است که تمام ابزارهای package-manager از آن استفاده می کنند. ما حالا فایل خاصی که تمام نام بسته های ما را نگهداری می کند را ایجاد می کنیم.

 

بیایید فایل bower.json را در ریشه پروژه خود ایجاد کنیم و نام پکیج هایی که به آنها احتیاج است را وارد کنیم:

 

 

حالا برای نصب این بسته ها، دستور زیر را در خط فرمان خود وارد می کنیم:

 

 

فقط می خواهم که، Bower فایل bower.json ما را بخواند و تمام فایل هایی که می خواهیم را در پوشه libs نصب کند.

 

bower-installed-libs

 

استفاده از بسته های Bower ما

 

حال که تمام بسته های مورد نیاز خود برای پروژه را نصب کردیم. تمام کاری که نیاز است لینک کردن آنها است. شاید این روش کار کمی عجیب و غریب به نظر برسد، با این حال روش کار bower اینطور است و برای کمک به توسعه دهنده ها ایجاد شده است نه برای دردسر درست کردن، با کمی کار با این نوع از ابزارها می بینید که چقدر می توانند برای ما مفید باشند.

 

برای استفاده از فایل ها، تنها آنها را به سند خود لینک کنید:

 

 

انجام شد!

 

در این پست ما فقط خواستیم تمام فایل های مورد نیاز خود را به پروژه خود اضافه کنیم. نیازی به صرف زمان برای جستجو در بسته ها ندارید. فایل bower.json را ایجاد کنید و هک را شروع کنید.

این مقاله تنها با آشنایی شما با اندکی از ویژگی های Bower ایجاد شده است. من پیشنهاد می کنم مستندات و پیکربندی های رسمی bower را مطالعه کنید.

پست های بیشتری را در رابطه با Bower در زیر قرار داده شده است:

 

  • ژورا

    من دقیقا متوجه نمی شم … یعنی bower هم یک پکیج منیجر هست مثل npm؟ خب اول بعد اول باید npm داشته باشیم تا بتونیم؟
    پکیج منیجر های دیگه ای هم هستن غیر از اینا؟

    • پاتریک درآواکیانس

      بله یک پکیج منیجر front-end و npm برای back-end. نه فقط این دو برای Node موجود هستند. 🙂