Не смотря на то, что в настоящее время сами разработчики пакетного менеджера Bower рекомендуют использовать для работы другие инструменты, он остается весьма популярен среди web-разработчиков. И пожалуй главное его достоинство - это простота использования и низкий порог вхождения в технологию.
Сегодня мы рассмотрим данный инструмент исключительно с энциклопедической точки зрения, для того, чтобы разобраться что такое пакетные менеджеры в целом, и для чего они нужны.
Здесь не будет споров о том, умер или не умер Bower, и стоит или не стоит его использовать в проектах.
Так или иначе Bower остается популярным инструментов при разработке сайтов и web-приложений, и обладает большой базой пакетов для него.
По итогу прочтения данной статьи, вы уже самостоятельно примете решение, нужен ли вам пакетный менеджер или нет.
И так, погнали.
Для чего нужны пакетные менеджеры?
Каждый из нас сталкивался с тем, что в разрабатываемый проект необходимо добавить стороннее расширение, это может быть популярная js библиотека jquery или плагин fancybox, или может быть css библиотека normalize.css. В любом случае нам приходится открывать сайт решения, или страницу на github, скачивать архив, распаковывать, а затем устанавливать себе на проекте.
А что если я вам скажу, что это все можно сделать всего лишь одной командой в консоли? Причем одной командой скачать не одну, а сразу несколько необходимых для проекта библиотек.
Кроме того, при установки одного решения очень часто нужно, чтобы было обязательно установлено и другое, связанное с ним решение. Например, опять же, для работы fancybox необходимо установить библиотеку jquery. Таким образом получается что одно решение зависит от другого.
Эти и некоторые другие задачи решают пакетные менеджеры, в частности Bower, о котором сегодня пойдет речь.
Установка bower
Для работы bower необходимо установить nodejs и git!
В данной статье мы не будем рассматривать установку этих решений, так как это делается весьма просто. Скачать и установить node.js можно по ссылке - https://nodejs.org/en/, скачать и установить git - https://git-scm.com/
Далее нам необходимо установить непосредственно, Bower, делать мы это будем через npm. Заходим в терминал и выполняем команду для установки:
Установка bower
> npm install -g bower
Флаг -g говорит о том, что мы хотим установить Bower глобально.
После этого мы можем проверить работу пакетного менеджера выполнив команду:
Текущая установленная версия bower
> bower -v
Если все ок, то на экране терминала мы увидим уставленную версию Bower.
Выполнив команду help мы получим список всех доступных команд в пакетном менеджере.
Список доступных команд в Bower
> bower help
Инициализация Bower и установка пакетов.
После успешной установки пакетного менеджера bower мы можем приступить к поиску и установке пакетов. Под пакетами подразумеваются все возможные решения: плагины, библиотеки и прочее прочее, в общем все, что можно установить через пакетный менеджер.
Перед выполнением команды установки пакета в проект, необходимо перейти в директорию проекта в терминале (команда cd).
Для полноценной работы Bower необходимо выполнить инициализацию пакетного менеджера в проекте.
Инициализация Bower
> bower init
В ходе инициализации вам потребуется (опционально) ответить на пару вопросов терминала, по итогу инициализации в папке проекта появится файл bower.json внутри которого будет json-структура пакетов вашего проекта.
Для установки пакета необходимо выполнить команду:
Установка пакета
> bower install <package>
Например, установка jquery будет выглядеть следующим образом:
> bower install jquery
Конечно для установки пакета необходимо знать зарезервированное имя пакета в Bower, но к этому мы еще вернемся чуть позже.
Многие команды в bower имеют сокращенный вид, например, для install - это i, кроме того в одной команде мы можем перечислить сразу несколько пакетов сразу:
> bower i jquery fancybox
В случае успешной установки пакетов в папке проекте появится директория bower_components, в которой будут располагаться скаченные пакеты.
Кроме того в процессе установки мы можем указать конкретную версию необходимого пакета, а также задать флаг, определяющий попадет ли в дальнейшем пакет на продакшен или нет.
При этом, если мы начнем установку пакета с зависимостью, то Bower сделает работу за нас - установив все необходимые для работы зависимости.
Например, попробуем установить fancybox, без предварительной установки jquery:
> bower i fancybox#3.5.0 -S
Таким образом Bower скачает конкретную версию плагина fancybox, отметит его как флагом "для продакшена" и дополнительно скачает подходящую для работы версию библиотеки jquery.
Как вы поняли, флаг -S (или флаг --save) показывает, что данный пакет в дальнейшем необходим на продакшене, если пакет необходимо использовать только для разработки, то необходимо указать флаг -D (или флаг --save-dev).
Просмотр установленных пакетов
После того, как мы успешно установили пакеты, мы может просмотреть собственно, что было установлено, сделать это можно с помощью следующей команды:
Просмотр установленных пакетов
> bower list
Если мы зайдем в скаченную папку пакета, то увидим, что в папке очень много "мусора", и необходимо найти нужные для подключения файлы. Это можно сделать с помощью следующей команды:
Просмотр основных файлов проекта
> bower list --path
Флаг --path позволяет получить путь до нужных файлов.
К сожалению, Bower не предлагает решений по внедрению скаченных пакетов непосредственно в проект, это необходимо делать с помощью сторонних решений, например таких как Gulp или Webpack.
Поиск пакетов
Конечно же, вы можете столкнуться с ситуацией, когда не помните название пакета, тогда вы можете найти необходимый пакет через поиск на официальном сайте Bower - https://bower.io/search/
Или же, найти официальный сайт или страницу на github и посмотреть там имя пакета в системе bower.
Например, на сайте плагина fancybox:
Или вы можете воспользоваться специальной командой для поиска пакета по названию:
Поиск пакета
> bower search <package>
Например,
> bower search jquery
Обновление и удаление пакета
Конечно же вы можете обновить свой пакет до определенной или последней версии.
Обновление установленного пакета
> bower update <package>
Например:
> bower update jquery
Или вовсе удалить пакет из зависимостей:
Удаление пакета
> bower uninstall <package>
Данная команда также может принимать уже знакомые флаги -S и -D.
Например:
> bower uninstall jquery -D
Для чего нужен файл bower.json?
Главная задача файла bower.json - это сохранения списка зависимостей проекта. И этим можно пользоваться, например: использовать один и тот же файл bower.json от проекта к проекту, с минимальными изменениями в списке зависимостей.
Или же, при размещении своего проекта на git репозитории, совсем не обязательно заливать папку bower_components, так как это не имеет смысла. Достаточно добавить в репозиторий лишь файл bower.json.
При необходимости вы можете клонировать проект и установить все зависимости, всего лишь одной командой:
> bower i
Это очень удобно!
Это, конечно же, не все возможности пакетного менеджера Bower, больше информации ищите на официальном сайте инструмента.
Надеюсь, благодаря данной статьи, я частично или полностью раскрыл смысл пакетных менеджеров.
А если вы хотите познакомиться с более современным пакетным менеджером зависимостей, то крайне рекомендую обратить внимание на Yarn - https://yarnpkg.com/en/
Друзья, ваши подписки, лайки и комментарии вдохновляют меня на написание качественного и интересного материала! Всем добра!
Внимание! Данный материал является авторским, запрещено любое использование материала без согласия автора статьи.
