BOWER‌ چیست؟

سلام

همونطور که میدونید npm در اصل پکیج منیجر node هست ولی در توسعه frontend هم میتونه مورد استفاده قرار بگیره.

از طرفی bower هم اومد تا تمرکزش رو بذاره روی مدیریت پکیج‌هایی که مختص frontend هست.

از تفاوت‌های عمده‌شون میشه به نحوه مدیریت dependecyها اشاره کرد: npm  این امکان رو میده که هر پکیجی، وابستگی‌های خودش رو داشته باشه و به صورت درخت‌وار این وابستگی‌ها شکل بگیره که طبیعتا باعث میشه حجم پکیج‌ها زیاد بشه و در مواقعی که محدودیت حجم مطرح باشه (مثلا در سرور) مشکل ایجاد میکنه (که راه‌کارهایی براش در نظر گرفتند مثل dedupe)

اما bower دسترسی‌ها رو اصطلاحا به صورت flat مدیریت میکنه که برای توسعه‌ی وب بسیار مناسب‌تره.

مثلا شما نیاز دارید که بوت استرپ رو به پروژه‌تون اضافه کنید، خیلی راحت میتونید در bower دستور زیر رو وارد کنید تا بوت استرپ و وابستگی آن (در اینجا jquery) دانلود بشند.

bower install bootstrap

و دفعه بعد اگر پکیجی رو اضافه کنید که اون هم نیاز به jquery داشته باشه، bower دوباره jquery رو نصب نمی‌کنه.

توجه کنید که اضافه کردنشون به کد‌های پروژه با خو دتونه که هم میتونید به صورت دستی این کار رو بکنید هم با استفاده از ابزارهایی مثل gulp،  grunt و … .

موفق باشید.

آپدیت:

بعد از نسخه سوم npm، نصب peerDependencyها به صورت خودکار انجام نمیشه و بلکه باید دستی صورت بگیره و چون bootstrap پکیج jquery رو جزو peerDependencyهاش گذاشته، با دستور بالا فقط bootstrap نصب میشه و jquery رو باید با دستور زیر خودمون نصب کنیم:

bower install jquery

اما فرضا اگه بخواهیم پکیج Datatables رو نصب کنیم میتونیم اول با دستور زیر جستجو کنیم:

bower search datatables

که لیستی از پکیج‌ها رو نشون میده و ممکنه برای راحتی یه پکیج خاص چندتا نام داشته باشه‌، مثلا برای نصب این پکیج فرقی نمیکنه از اسم datatables استفاده کنیم یا datatable.

بعد که پکیج موردنظرمون رو پیدا کردیم میتونیم با دستور bower install و اسم پکیج نصبش کنیم:

bower install datatables

البته برای نصب یه پکیج، به غیر از اسمش میتونیم از راه‌های مختلفی مثل آدرس گیتش هم استفاده کنیم، مثلا:

bower install https://github.com/DataTables/DataTables.git

بعد از نصب پکیج، پوشه‌ای به نام bower_components در دایرکتوری جاری ایجاد میشه که پکیج‌ها اونجا نصب میشند و اگه محتوای این پوشه رو نگاه کنید می‌بینید که دو تا پوشه به نام‌های datatables و jquery موجوده که چون jquery به عنوان یک dependency برای datatables تعریف شده، با نصب datatables به صورت خودکار jquery هم نصب شده.

قبل از این که بریم سراغ آدرس‌دهی به پکیج‌های نصب شده، فرض کنیم میخواهیم پلاگین nicescroll رو هم نصب کنیم.

خب فقط کافیه دستور زیر رو وارد کنیم:

bower install nicescroll

از طرفی این پکیج هم به jqurey وابسته است اما bower چک میکنه چون از قبل این depedency نصب شده دیگه مجددا jquery رو نصب نمیکنه.

و وقتی هم که شما بخواهید اقدام به پاک کردن یه پکیجی بکنید میتونید خیلی راحت از دستور زیر استفاده کنید:

bower uninstall datatables

و اگر اقدام به پاک کردن پکیجی کنید که dependency یک یا چندتا از پکیج‌های دیگه باشه، bower بهتون اخطار میده.
(مثلا در اینجا میتونید برای jquery امتحان کنید)

خب بریم سراغ آدرس‌دهی، حالا فرض کنیم که ما پکیج jquery و bootstrap رو داریم و میخواهیم فایل استایل و اسکریپت bootstrap رو در پروژه‌مون صدا بزنیم و میدونیم که قبل از فایل اسکریپت bootstrap نیازه که فایل jquery رو فراخوانی کنیم.

اول نگاهی به پوشه‌ی jquery بندازیم:

├── AUTHORS.txt
├── LICENSE.txt
├── README.md
├── bower.json
├── dist
   ├── core.js
   ├── jquery.js
   ├── jquery.min.js
   ├── jquery.min.map
   ├── jquery.slim.js
   ├── jquery.slim.min.js
   └── jquery.slim.min.map
├── external
└── src

خب با فرض اینکه فایل اصلی پروژه‌ی ما (مثلا index.html) کنار پوشه‌ی bower_components هست، برای فراخوانی فایل jquery به پروژه‌مون کافیه خط زیر رو به فایل اصلیمون اضافه کنید:

<script src="bower_components/jquery/dist/jquery.slim.min.js"></script>

و همین طور برای اسکریپت و استایل bootstrap هم داریم:

<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

به همین سادگی 🙂

امیدوارم توضیحات کافی بوده باشه، موفق باشید 😉