Как пользоваться bower: Bower — пакетный менеджер для web

Bower — пакетный менеджер для web

Bower — пакетный менеджер для web. Первое подробное руководство в рунете. Пришло время разобрать bower «по косточкам».

Всем привет! Меня зовут Дмитрий Ковальчук и я представляю вам первый урок в курсе «Bower — подробное руководство». Мы пройдем путь от основ, до лучших практик и продвинутых техник.

Начнём с определения. Bower — это пакетный менеджер для web. У него масса преимуществ и им пользуются если не все, то большинство современных опытных frontend специалистов. Сегодня стыдно не знать Bower и это не просто мэйнстрим. Bower действительно упрощает нам жизнь.

Как установить bower?

Для того, чтобы работать с Bower, у вас должны быть установлены node.js c npm, а также git. Я работаю из консоли git bash в оболочке conemu. Вам, особенно если вы новичок, рекомендую также работать именно в git bash. Если у вас нет git и git bash, то скачайте его с официального сайта git-scm.com

Если вы пользователь windows, не забудьте во время установки перевести radio button в положение «Run Git from the Windows Command Prompt». Таким образом, git автоматически будет добавлен в ваш PATH, что в будущем сэкономит вам силы и сбережет ваши нервы.

Что касается node.js и npm, то тут проверить очень просто:

Если вы вместо версии видите что-то вроде «comand not found», тогда жмите на паузу и идите на официальный сайт nodejs nodejs.org и скачивайте последнюю версию продукта.

Если с git и npm повросов и сомнений больше нет, тогда мы можем преступить к работе.

Давайте теперь установим сам bower

И сразу проверим его версию

Отлично. bower у нас установлен, теперь мы шаг за шагом будем погружаться в особенности работы с ним.

Поиск, инсталляция, обновление и удаление библиотек

Обычно, начинающие разработчики, для того, чтобы скачать какую-либо библиотеку, фреймворк или плагин, лезут в google, находят официальный сайт или репозиторий этого продукта и скачивают необходимые файлы. Вспомните сами, сколько раз вы заходили на jquery.com, чтобы скачать последнюю версию любимой всеми javascript программистами библиотеки?

Кто-то предпочитает хранить самые часто используемые библиотеки в отдельной папочке или копируют из проекта в проект. Работа становится быстрее, но не решается проблема устаривания версии продукта (т.е., когда выйдет новая версия библиотеки, придется опять лезть на официальный сайт).

Некоторые из вас предпочитают подключать библиотеки, используя CDN, т.е. подключают необходимые библиотеки со сторонних хостингов, чтобы увеличить скорость загрузки сайта. И таких разработчиков bower’у есть чем порадовать. Об этом мы еще будем говорить позже.

Bower же позволяет находить, скачивать, обновлять и удалять необходимые библиотеки практически моментально. Вы просто пишите необходимые команды в консоли и Bower делает всю работу за вас.

ПОИСК

Поиск необходимых библиотек мы можем осуществлять на официальном сайте, если пока что сомневаемся, или не привыкли к работе в консоли

Или прямо в консоли. Давайте попробуем найти jquery

Кстати, многие команды имеют свои укороченные варианты

Как мы видим, в консоли появился огромный список библиотек. Это различные плагины, которые в своём названии или описании имеют слово jquery. Огромный список свидетельствует о колоссальных размерах сообщества frontend разработчиков, которые пишут эти библиотеки и регистрируют их в bower. Чтобы узнать более детальную информацию о библиотеке, например получить список версий продукта, используется команда info

УСТАНОВКА

Для установки любого нового пакета (или библиотеки) используется команда install или её сокращенный вариант i. Все вновь установленные библиотеки будут попадать в папку bower_components по-умолчанию.

bower install jquery#1.6.4

Давайте теперь выведем прямо в консоль список установленных библиотек

Как теперь быстро добавить ссылки на скаченные библиотеки в index.html? Один из способов использовать команду list с ключем —path

ОБНОВЛЕНИЕ

Для обновления библиотек используется команда update, однако, чтобы полноценно с ней работать, нужно создать файл манифест bower.json, а мы этого пока не умеем. Если мы прямо сейчас попытаемся написать

то ничего не произойдет, т.к. во время первичной установки мы жестко указали версию библиотеки 1.6.4 Так что сейчас, пока у нас нет файла манифеста, мы можем установить, например jquery 2.0.3 просто поверх 1.6.4

Давайте попробуем и посмотрим, что у нас получится

Bower начинаем с нами советоваться, как поступить ему поступить! Он сообщает, что у нас уже установлен jquery#1.6.4 и мы можем либо оставить всё, как было, либо установить jquery#2.0.3. Мы выбираем второй вариант.

УДАЛЕНИЕ

jquery бесследно исчез из папки bower_components

Всё, первое знакомство с bower прошло успешно. Вы уже можете начинать работать и радоваться сэкономленному времени. Однако самое интересное еще впереди.

Инициализация Bower пакета. Файл манифест bower.json.

Чтобы ощутить следующие преимущества работы с Bower, необходимо создать так называемый файл «манифест» bower.json. Сделать это можно либо вручную, просто создав этот файл, либо в автоматическом режиме, набрав в консоли команду.

В данном файле будет хранится вся информация о нашем проекте, такая как: название, версия, а самое главное — перечень зависимостей, т.е. библиотек, которые необходимы для работы нашего проекта.

Давайте взглянем на него подробнее

• name — единственное обязательное поле, т.е. остальные мы можем просто удалить, если пока они нам не нужны
• version — версия вашего пакета. Обязательно 3 цифры
• authors — авторы
• ignore — перечень путей, которые мы хотим проигнорировать
• dependencies — другие пакеты, от которых зависит ваш проект (на продакшене)

Обратите внимание, что normalize.css записался в наш файл манифест в объект dependencies. Это очень важный момент.

Давайте установим теперь библиотеку jquery, но уже немного не так, как мы это делали раньше. Мы явно укажем, что jquery обязательно должен быть в продакшен версии нашего проекта. Т.е., без него проект отдавать заказчику нельзя. Отныне мы все библиотеки, от которых зависит наш проект будем устанавливать с ключем —save.

А теперь представьте другую ситуацию. Она, конечно, встречается крайне редко (в отличае от того же npm и gulp, где ситуация обратная), однако вы должны знать все нюансы. Есть библиотеки, которые нужны только разработчику, т.е. нам с вами, именно в процессе разработки, но не нужны на продакшене.

Мне сложно придумать пример, потому что в своей повседневной разработке, я встречаюсь с этим довольно редко, если не сказать никогда.

К примеру, мне на ум пришла библиотека Zepto.js, которая очень похожа на облегченную версию jquery. Zepto не поддерживает старые версии internet explorer (младше 10ой версии), в отличие от jquery. Представим, что для наших каких-то собственных нужд мы будем использовать Zepto, но в продакшен версии продукта будет именно jquery. Так вот, такие библиотеки, которые нужно только разработчику, но не нужны на продакшене, необходимо писать не в dependencies, а в devDependencies. Делается это очень просто

Теперь давайте еще раз пройдем процедуру удаления, но на этот раз учтём файл манифест. Удаляя библиотеку физически, нам нужно подчищать и bower.json. В этих целях применяется всё тот же ключ —save (-S) или —save-dev (-D). Давайте удалим все наши библиотеки, но сделаем это корректно. Обратите внимание, что удалять, ровно как и устанавливать библиотеки можно просто перечисляя их одну за другой через пробел.

bower uninstall jquery normalizr.css -S

Подробнее про версии и обновление библиотек

Настоятельно рекомендую вам прочитать про «Семантическое версионирование«, чтобы вы понимали, как обновляя библиотеки не потерять обратную совместимость. на latest, то получим версию 2.1.4

ВНИМАНИЕ! На момент просмотра этого скринкаста, возможно выйдут и более свежие версии библиотек. Главное, чтобы вы поняли суть.

Чтобы преступить к следующему шагу, давайте специально, в академических целях установим старинную версию jquery

Подробнее про зависимости

Все вы знаете или слышали про фреймворк bootstrap. Его также можно установить при помощи bower. Многие из вас также знают, что bootstrap зависит от jquery. bower также это знает.

Bower знает всё о зависимостях вашего проекта и позаботится, чтобы они между собой не конфликтовали.

bower i bootstrap -S

bower понимает, что для корректной работы последней версии bootstrap необходим jquery#1.9.1 и сообщает нам о возможных неприятностях со старой версией jquery.

bower предлагает нам самим решить, как поступить в данном случае. Давайте выберем вариант bootstrap#3.3.4 и jquery#1.9

теперь, если мы наберем команду

bower list

то увидим, что есть логические несоответствия в нашем файле манифесте, которые нам с вами предстоит решить.

Давйте вручную отредактируем bower.json. Напишем, что нам подходит версия jquery#2.1.4

Еще раз убедимся, что всё в порядке

bower list

Отлично! Видите, как здорово, bower никогда не даст нам запутаться в версиях и не поставит под угрозу работу нашего проекта.

Дополнительные настройки bower

У bower есть целый ряд дополнительных настроек, таких, как, например место расположения скаченных библиотек.

По-умолчанию, bower устанавливает все зависимости в папку bower_components. Однако, мы можем поменять как имя папки, так и её место расположение. Делается это очень просто: необходимо создать рабочий файл, который должен называться .bowerrc

В нём пишем

{
«directory» : «app/bower»
}

Теперь перенесем уже существующую папку в новое место. Для этого в консоли наберем

mv bower_components app/bower

И установим новую библиотеку tooltipster

Наслаждайтесь результатом!

Рекомендуемые курсы

Bower — зачем нужен, установка и настройка

На данный момент, Bower один инструмент front-end разработчиков по всему миру. Наряду с Grunt и Gulp, он вызывает много вопросов у начинающих разработчиков.
Что же такое Bower? Говоря по простому, Bower управляет пакетами, которые вы захотите использовать в проекте. Важно отметить, что в данном случае «пакет» имеет несколько другое значение, чем библиотека или фреймворк.

Bootstrap — это пакет. jQuery — это тоже пакет.
Приведем цитату с официального сайта:
Веб-сайты сделаны из многих частей — фреймворки, библиотеки, css и javascript файлы. Bower управляет всеми составляющими.

Почему надо использовать Bower?

Как разработчик, вы должны стремиться к тому, чтобы максимально автоматизировать свою работу. Неэффективно грузить файлы библиотек и фреймоворков в проект по отдельным файлам. Используя Bower вам не нужно будет заниматься загрузкой вручную.
Например, вы хотите установить Angular в ваш проект. Вместо того, чтобы искать в интернете, где скачать файлы Angular или подключить CDN, вы можете запустить команду bower install angular и bower установит фреймворк в ваш проект.

Использование bower.json и .bowerrc

bower.json и .bowerrc — это два основных файла для работы с bower.

Bower.json

Настроив bower.json вы можете использовать одни и те же пакеты в разных проектах. По принципу работы он очень похож на package.json. Он состоит из различных зависимостей для конкретного проекта.
Эти пакеты определяются в виде JSON объектов.
Для того, чтобы установить пакеты, надо создать файл bower.json с зависимостями в папке вашего проекта и запустить команду bower install.
Дополнительно, вы можете использовать командную строку для добавления нужных пакетов в bower.json. Для этого надо использовать команду bower install с флагом —save.

Пример файла bower.json

{
«name»: «example»,
«version»: «0.0.1»,
«dependencies»: {
«jquery»: «latest»,
«bootstrap-sass»: «latest»,
«font-awesome»: «latest»,
«html5shiv»: «latest»,
«respond»: «latest»
}
}

В данном примере мы задаем имя проекта «example», версию «0.0.1» и зависимости. После запуска команды bower install, будут установлены пакеты jQuery, Bootstrap Sass, FontAwesome, html5shiv и respond. Найти нужные пакеты вы можете на сайте http://bower.io/search/

.bowerrc

RC файлы — это конфигурационные файлы для программ в Unix операционных системах. .bowerrc используется для определения конфигурации Bower, задания путей для сохранения библиотек в вашем проекте.
Например, если вы хотите, чтобы все библиотеки сохранились в папке public/libs, задайте в .bowerrc следующую строку:

{
«directory»: «dev/libs/»
}

Если вы не укажете путь сохранения, Bower сохранит все пакеты в папку bower_components.

зачем фронтенду нужен менеджер пакетов — Наноблог Артёма Сапегина

Статья написана в 2014-м году, во времена npm 2, который был не очень популярен среди фронтендеров из-за описанных в статье недостатков. Сейчас пользуйтесь Ярном или npm, а статью считайте исторической.

Статья впервые была опубликована в майском номере журнала Хакер. В журнал вошла сильно сокращённая версия; ниже — полная.

Менеджеры пакетов упрощают установку и обновление зависимостей проекта, то есть сторонних библиотек, которые он использует: jQuery, Fotorama, всё, что используется на вашем сайте и написано не вами.

Хождение по сайтам библиотек, скачивание и распаковка архивов, копирование файлов в проект — всё это заменяется парой команд в терминале.

У многих языков программирования есть стандартные менеджеры пакетов, которыми разработчики пользуются для установки всех библиотек: gem у Руби, pip у Питона и другие. У серверного Яваскрипта есть npm (почему он не подходит для клиентского — ниже), а у клиентского яваскрипта до недавнего времени ничего не было. Было множество разных пакетных менеджеров (Jam, Component, Volo, Ender), но большинство из них так и не стали популярными, а от менеджера пакетов, которым не поставишь нужных библиотек, толку мало.

Бовер — не стандартный менеджер пакетов для клиентского Яваскрипта, но самый популярный: сейчас там больше 11 тысяч пакетов.

Бовер не навязывает пользователю свою систему сборки, а разработчику пакетов — метод подключения библиотеки (AMD, CommonJS и другие). Всё, что делает Бовер — устанавливает нужные проекту пакеты подходящих версий вместе с их зависимостями. Другими словами: просто загружает файлы нужных библиотек и всё, что нужно для их работы в специальную папку. Остальное остаётся на усмотрение разработчика.

Почему не npm

Главное отличие npm и Бовера — подход к установке зависимостей пакетов. npm устанавливает зависимости для каждого пакета отдельно, в итоге получается большое дерево пакетов (nodemodules/grunt/nodemodules/glob/nodemodules/…), где может быть несколько версий одного и того же пакета. В клиентском Яваскрипте это недопустимо: нельзя подключить на страницу две версии jQuery или любой другой библиотеки. В Бовере каждый пакет устанавливается один раз (jQuery всегда будет в папке bowercomponents/jquery, сколько бы пакетов от него не зависело) и в случае конфликта зависимостей, Бовер просто не станет устанавливать пакет, не совместимый с уже установленными.

Установка Бовера

Для работы с Бовером вам потребуются Node и Git. Установка:

Работа с пакетами

Попробуем что-нибудь установить, например, jQuery:

bower install --save jquery  

Эта команда скачает jQuery последней версии в папку bower_components/jquery.

Флаг --save говорит Боверу, что он должен сохранить имя пакета и его версию в файл-манифест — bower.json. В этом файле хранится список всех зависимостей проекта (пакетов, установленных через Бовер) и другие метаданные, нужные для создания своих пакетов (об этом в конце статьи). Вместе с именами пакетов можно указать версии, с которыми ваш проект гарантированно будет работать.

У нас такого файла ещё нет, о чём и говорит строчка «No bower.json file to save to, use bower init to create one» в логе. Создадим его:

Бовер будет задавать много вопросов, но до тех пор пока мы не захотим зарегистрировать свой пакет, ответы на большинство из них не имеют значения, можно просто нажимать Enter.

На вопрос «set currently installed components as dependencies?» нужно ответить «Yes» — все ранее установленные компоненты (в нашем случае это jQuery) автоматически попадут в созданный JSON-файл. А на вопрос «would you like to mark this package as private which prevents it from being accidentally published to the registry?» — тоже «Yes» — это предотвратит случайную регистрацию пакета в реестре Бовере.

Поставим ещё несколько пакетов:

bower install --save social-likes jquery-icheck fotorama

И посмотрим, что у нас получилось:

bower list
bower check-new     Checking for new versions of the project dependencies..
bowertest
├─┬ fotorama
│ └── jquery
├── jquery
├─┬ jquery-icheck
│ └── jquery
└─┬ social-likes
  └── jquery

Команда bower list показывает список всех установленных пакетов. Тут мы видим, что все пакеты зависят от jQuery, и что Бовер смог найти подходящую всем версию — jQuery 2.1.0.

На файловой системе это выглядит вот так:

tree -L 2
.
├── bower.json
└── bower_components
    ├── fotorama
    ├── jquery
    ├── jquery-icheck
    └── social-likes

5 directories, 1 file

Каждый пакет устанавливается в свою папку, вложенных пакетов нет, jQuery встречается только один раз. В корне проекта лежит созданный командой bower init файл bower.json, но теперь там перечисленны уже все пакеты, которые показывает bower list, а не только jQuery.

Для удаления пакетов используется команда bower uninstall:

bower uninstall --save jquery-icheck  

Вы можете спокойно удалять папку bower_components или добавить её в ваш .gitignore. Команда bower install (без дополнительных параметров) вернёт всё как было:

Развёртывание проекта

Есть два подхода к развёртыванию проектов:

1. В репозиторий добавляется только файл-манифест и все пакеты устанавливаются во время развёртывания проекта. Так в репозитории не хранится ничего лишнего, но если во время развёртывания упадёт Гитхаб или другой сервер, с которого устанавливаются пакеты, будут проблемы.
2. В репозиторий добавляется не только bower.json, но папка bower_components. Так развёртывание не зависит от внешних серверов, но репозиторий раздувается десятками (а то и сотнями) лишних файлов.

Семантические версии (semver)

Semver — это, во-первых, подход к версионированию библиотек: формат номера версии МАЖОРНАЯ.МИНОРНАЯ.ПАТЧ и правила, по которым следует увеличивать то или иное число.

А во-вторых — это способ описания требуемых версий зависимостей, который используют Бовер и npm.

При установке с флагом --save версии пакетов добавляются в bower.json в виде ~1.0.1. Тильда в начале говорит о том, что при установке будет выбрана версия 1.0.1 или с большим последним числом (ПАТЧ), если она есть. Таким образом будет установлена версия с последними исправлениями ошибок, но полностью совместимая с той, что указана в файле-манифесте.

Обновление зависимостей

В Бовере есть команда bower update, но она обновляет пакеты с учётом требований файла-манифеста. Например, если там указан jQuery ~2.0.0, то Бовер сможет обновить jQuery до версии, скажем, 2.0.9, но 2.1.0 уже не поставит, потому что эта версия не соответствует формуле ~2.0.0.

Для обновления пакетов (и bower.json) до действительно последних версий можно воспользоваться утилитой bower-update. Устанавливаем:

npm install -g bower-update

Запускаем:

Поиск пакетов

Есть два способа найти пакет в Бовере: гиковский и обычный.

Гиковский:

bower search jquery
Search results:

    jquery git://github.com/jquery/jquery.git
    jquery-ui git://github.com/components/jqueryui
    ...

Обычный: открыть в браузере bower.io/search.

Автоматическая сборка

Бовер перекладывает проблемы сборки установленных пакетов на плечи разработчика. Самый простой способ — просто склеить JS-файлы Грантом, Галпом или любой другой системой сборки, которой вы пользуетесь.

Я пользуюсь Грантом, поэтому расскажу, как склеивать пакеты Грантом. О том как пользоваться Грантом была большая статья в июльском номере прошлого года, поэтому покажу сразу конфиг плагина grunt-contrib-concat:

concat: {
  main: {
    src: [
      'bower_components/jquery/jquery.min.js',
      'bower_components/fotorama/….js',
      'bower_components/jquery-icheck/….js',
      'bower_components/social-likes/social-likes.min.js’,
      'scripts/*.js'  
    ],
    dest: 'build/scripts.js'
  }
}

У этого способа есть много недостатков: вам нужно смотреть имена файлов для каждого пакета; следить, чтобы файлы собирались в правильном порядке (например, jQuery должен быть выше, чем скрипты, зависящие от него). Плагин grunt-bower-concat может делать это сам: он автоматически склеивает все установленные зависимости в правильном порядке в один файл:

bower_concat: {
  all: {
    dest: 'build/_bower.js',  
    exclude: [  
        'jquery',  
        'modernizr'  
    ]
  }
},
concat: {
  main: {
    src: [
      'build/_bower.js',
      'scripts/*.js'  
    ],
    dest: 'build/scripts.js'
  }
}

Регистрация своих пакетов

Чтобы ваша библиотека стала доступна для установки через Бовер, её нужно зарегистрировать. Для этого:

— В корне проекта должен лежать файл-манифест bower.json.
— У проекта должен быть гит-репозиторий (например, на Гитхабе).
— Проект должен использовать семантические версии и в репозитории должен быть гит-тег для последней версии.

Для создания файла файла-манифеста снова воспользуемся командой bower init:

bower init
[?] name: awesomelib
[?] version: 0.0.1
[?] description: My awesome jQuery plugin.
[?] main file: jquery.awesomeplugin
[?] keywords: jquery awesome yay
[?] authors: Artem Sapegin <[email protected]>
[?] license: MIT
[?] homepage: https://github.com/sapegn/jquery.awesomeplugin.js
[?] set currently installed components as dependencies? Yes
[?] add commonly ignored files to ignore list? Yes
[?] would you like to mark this package as private which prevents it from being accidentally published to the registry? No

{
  name: 'awesomelib',
  version: '0.0.1',
  description: 'My awesome jQuery plugin.',
  main: 'jquery.awesomeplugin.js',
  keywords: [
    'jquery',
    'awesome',
    'yay'
  ],
  authors: [
    'Artem Sapegin <[email protected]>'
  ],
  license: 'MIT',
  homepage: 'https://github.com/sapegn/jquery.awesomeplugin',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ],
  "dependencies": {
    "jquery": "~2.1.0"
  }
}

[?] Looks good? Yes

И хотя обязательно нужно заполнить только имя пакета (поле name), остальные поля тоже очень полезны:

— description и keywords помогут пользователям найти вашу библиотеку через интерфейс поиска пакетов.
— main определяет главный файл пакета. Это поле может быть использовано автоматическими сборщиками, такими как grunt-bower-concat.
— license — всегда указывайте лицензию: она говорит потенциальному пользователю вашего пакета, сможет ли он использовать его в своём проекте. Например, лицензия GPL требует, чтобы любой использующий её проект тоже распространялся по этой лицензии, что не всегда возможно.
— ignore — по умолчанию Бовер скачивает весь репозиторий, что, во-первых, увеличивает время установки, а, во-вторых, добавляет в проект лишние файлы. Лучше всего исключить всё, кроме необходимых для работы пакета файлов (главный JS-файл, CSS и так далее), лицензии и ридми.
— dependencies — все пакеты, от которых зависит ваш пакет.

Теперь нужно закоммитить bower.json, создать гит-тег с последней версией и запушить всё в удалённый репозиторий:

git add bower.json
git commit -m "Add bower.json."
git tag "v0.0.1"
git push origin --tags

Вот теперь можно регистрировать пакет:

bower register jquery-awesomeplugin git://github.com/sapegin/jquery-awesomeplugin.git

Дальше Бовер сам будет проверять обновления пакета, главное не забывать создавать гит-тег для каждой новой версии.

Для облегчения обновления своих пакетов можно воспользоваться такими инструментами, как grunt-bump или mversion.

Зачем нужен менеджер пакетов, или почему именно Bower — «Хакер»

Содержание статьи

Все материалы сюжета:

Надоело ходить на сайты JavaScript-библиотек и качать архивы каждый раз, как надо добавить на сайт очередной jQuery-плагин? Бовер сделает все сам.

Менеджеры пакетов упрощают установку и обновление зависимостей проекта, то есть сторонних библиотек, которые он использует: jQuery, Fotorama, все, что используется на твоем сайте и написано не тобой.

Хождение по сайтам библиотек, скачивание и распаковка архивов, копирование файлов в проект — все это заменяется парой команд в терминале.

У многих языков программирования есть стандартные менеджеры пакетов, которыми разработчики пользуются для установки всех библиотек: gem у руби, pip у питона и другие. У серверного яваскрипта есть npm (почему он не подходит для клиентского — дальше), а у клиентского яваскрипта до недавнего времени ничего не было. Было множество разных пакетных менеджеров (Jam, Component, Volo, Ender), но большинство из них так и не стали популярными, а от менеджера пакетов, которым не поставишь нужных библиотек, толку мало.

Почему не npm

Главное отличие npm и Бовера — подход к установке зависимостей пакетов. Npm устанавливает зависимости для каждого пакета отдельно, в папку этого пакета, потом так же ставит зависимости зависимостей и так далее. В клиентском яваскрипте это недопустимо: нельзя подключить на страницу две версии jQuery или любой другой библиотеки. В Бовере каждый пакет устанавливается один раз, и в случае конфликта зависимостей Бовер просто не станет устанавливать пакет, несовместимый с уже установленными.

Бовер — не стандартный менеджер пакетов для клиентского яваскрипта, но самый популярный: сейчас там больше 11 тысяч пакетов.

Бовер не навязывает пользователю свою систему сборки, разработчику пакетов — метод подключения библиотеки (AMD, CommonJS и другие). Все, что делает Бовер, — устанавливает нужные проекту пакеты подходящих версий вместе с их зависимостями. Другими словами: просто загружает файлы нужных библиотек и все, что нужно для их работы, в специальную папку. Остальное остается на усмотрение разработчика.

Установка Бовера

Для работы с Бовером тебе потребуются Node.js и Git. Установка предельно проста: npm install -g bower

Работа с пакетами

Попробуем что-нибудь установить, например jQuery:

bower install --save jquery

Флаг --save говорит Боверу, что он должен сохранить имя пакета и его версию в специальный файл со списком всех зависимостей проекта — bower.json. У нас такого файла еще нет, о чем и говорит строчка «No bower.json file to save to, use bower init to create one» в логе.

Создадим bower.json:

bower init

Бовер будет задавать много вопросов, но до тех пор, пока мы не захотим опубликовать свой пакет, ответы на большинство из них не имеют значения, можно просто нажимать Enter.

На вопрос «set currently installed components as dependencies?» нужно ответить «Yes» — все ранее установленные компоненты (в нашем случае это jQuery) автоматически попадут в созданный JSON-файл. А на вопрос «would you like to mark this package as private which prevents it from being accidentally published to the registry?» — тоже «Yes», если вы не делаете библиотеку, которую потом будете публиковать в Бовере.

Поставим еще несколько пакетов (можно устанавливать несколько пакетов сразу):

bower install --save social-likes jquery-icheck fotorama
bower list
bower check-new     Checking for new versions of 
the project dependencies..
bowertest#0.0.0 /Users/admin/bowertest
├── jquery#2.1.0 (2.1.1-beta1 available)
├─┬ jquery-icheck#1.0.2
│ └── jquery#2.1.0 (2.1.1-beta1 available)
└─┬ social-likes#3.0.2
  └── jquery#2.1.0

Команда bower list покажет список всех установленных пакетов. Ты увидишь, что все пакеты зависят от jQuery и что Бовер смог найти удовлетворяющую всех версию jQuery — 2.1.0. Каждый пакет устанавливается в свою папку внутри директории bower_components, вложенных пакетов нет, jQuery встречается только один раз. В корне проекта лежит созданный нами bower.json, но теперь там перечислены уже все пакеты, которые показывает bower list, а не только jQuery.

Для удаления пакетов используется команда bower uninstall --save packageName.

INFO

Ты можешь спокойно удалять папку bower_components или добавить ее в свой .gitignore. Команда bower install (без дополнительных параметров) вернет все как было.

Развертывание проекта

Есть два подхода к развертыванию проектов:

1. В репозиторий добавляется только файл-манифест, и все пакеты устанавливаются во время развертывания проекта. Так в репозитории не хранится ничего лишнего, но, если во время развертывания проекта упадет гитхаб или другой сервер, с которого устанавливаются пакеты, будут проблемы.
2. В репозиторий добавляется и bower.json, и папка bower_components. Так развертывание не зависит от внешних серверов, но репозиторий раздувается десятками лишних файлов.

Семантические версии (semver)

Semver — это, во-первых, подход к версионированию библиотек: формат МАЖОРНАЯ.МИНОРНАЯ.ПАТЧ и правила, по которым следует увеличивать то или иное число. А во-вторых — это способ описания требуемых версий зависимостей, который используют Бовер и npm.

При установке с флагом --save версии пакетов добавляются в bower.json в виде ~1.0.1. Тильда в начале говорит о том, что при установке будет выбрана версия 1.0.1 или с большим последним числом (ПАТЧ), если она есть. Таким образом, будет установлена версия с последними исправлениями ошибок, но полностью совместимая с той, что указана вbower.json.

Обновление зависимостей

В Бовере есть команда bower update, но она обновляет пакеты с учетом требований, описанных в bower.json. Например, если там требуется jQuery ~2.0.0, то он сможет обновить его, например, до 2.0.9, но 2.1.0 уже не поставит, потому что он не соответствует формуле ~2.0.0.

Для обновления пакетов (и bower.json) до действительно последних версий можно воспользоваться bower-update. Устанавливаем:

npm install -g bower-update

Запускаем:

bower-update

— и вуаля!

Поиск пакетов

Есть два способа найти нужный пакет: гиковский и обычный. Гиковский:

bower search jquery
Search results:
  jquery git://github.com/jquery/jquery.git
  jquery-ui git://github.com/components/jqueryui
    ...

Обычный: открыть в браузере bower.io/search/.

Автоматическая сборка

Бовер перекладывает проблемы сборки установленных пакетов на плечи разработчика.

Самый легкий способ — просто склеить JS-файлы Грантом, Галпом или любой другой системой сборки, которой ты пользуешься.

Я пользуюсь Грантом, поэтому расскажу, как склеивать пакеты им. О том, как пользоваться Грантом, была большая статья в июльском номере прошлого года, поэтому покажу сразу конфиг плагина grunt-contrib-concat:

concat: {
  main: {
    src: [
      'bower_components/jquery/jquery.min.js',
      'bower_components/fotorama/….js',
      'bower_components/jquery-icheck/….js',
      'bower_components/social-likes/
       social-likes.min.js',
      // Скрипты твоего сайта
      'scripts/*.js'
      ],
      dest: 'build/scripts.js'
   }
}

У этого способа есть много недостатков: тебе нужно смотреть имена файлов для каждого пакета и следить, чтобы файлы собирались в правильном порядке (например, jQuery должен быть выше, чем скрипты, зависящие от него). Плагин grunt-bower-concat может делать это сам: он автоматически склеивает все установленные зависимости в правильном порядке в один файл:

bower_concat: {
  all: {
    // Склеенный файл
    dest: 'build/_bower.js',
    // Пакеты, которые нужно исключить 
    // из сборки
    exclude: [ 
      // Если jQuery подключается 
      // с CDN Гугла
      'jquery',
      // Если подключаем скрипты в конце 
      // страницы; Modernizr нужно 
      // подключать в <head>
      'modernizr'
    ]
  }
},

concat: {
  main: {
    src: [
      'build/_bower.js',
      // Скрипты твоего сайта
      'scripts/*.js'
      ],
    dest: 'build/scripts.js'
  }
}

ASP.NET Core | Bower

Bower

Последнее обновление: 14.03.2017

Bower представляет пакетный менеджер, предназначенный для управления пакетами и библиотеками JavaScript и CSS. Стандартный проект ASP.NET Core по типу
Web Application уже имеет встроенную поддержку Bower.

В узле Dependencies/Bower можно найти все пакеты, которыми можно управлять с помощью менеджера Bower.

Это все те пакеты, которые указаны в файле bower.json:

{
  "name": "asp.net",
  "private": true,
  "dependencies": {
    "bootstrap": "3.3.7",
    "jquery": "2.2.0",
    "jquery-validation": "1.14.0",
    "jquery-validation-unobtrusive": "3.2.6"
  }
}

Кроме того, в проекте есть такой файл .bowerrc. Он устанавливает директорию, в которую менеджер устанавливает пакеты:

{
    "directory": "wwwroot/lib"
}

В данном случае это каталог wwwroot/lib.

Bower на сегодняшний день поддерживает более 30 тысяч различных пакетов, которые мы можем добавить в свой проект.
Для этого мы можем напрямую ввести в bower.json название пакета и его версию:

Например, добавление в этот файл строки:

"jquery-ui": "1.12.1"

Добавит в проект в папку wwwroot/lib файлы библиотеки jquery-ui версии 1.12.1.

В качестве альтернативы мы можем нажать правой кнопкой мыши на узел Dependencies/Bower и выбрать пункт Manage Bower Packages…:

После этого открывается окно менеджера Bower, которое во многом напоминает Nuget-менеджер и в котором мы также можем удалить или обновить имеющиеся пакеты,
либо установить новые:

Добавление в Bower в пустой проект

Если мы создаем проект ASP.NET Core по типу Empty, то там поддержка Bower по умолчанию отсутствует. Но мы можем ее добавить.

Например, создадим проект по типу Empty. Далее добавим в проект новый элемент Bower Configuration File, который назовем bower.js:

После добавления изменим этот файл, добавив пакеты jquery и bootstrap:

{
  "name": "asp.net",
  "private": true,
  "dependencies": {
    "jquery": "2.1.4",
    "bootstrap": "3.3.6"
  }
}

Сохраним файл, и после этого в папку wwwroot/lib будут помещены пакеты jquery и bootstrap, и мы их сможем использовать:

Чтобы использовать добавленные пакеты, добавим в папку wwwroot новую страницу html, которую назовем index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Bower</title>
    <link href="lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
</head>
<body>
    <div>Используем Bower</div>
    <script src="lib/jquery/dist/jquery.js"></script>
    <script src="lib/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>

Для работы со статическими файлами добавим в поект через Nuget-менеджер пакет Microsoft.AspNetCore.StaticFiles,
а методе Configure() в классе Startup вызовем метод app.UseStaticFiles().

И после этого мы сможем обращаться к странице index.html:

Список основных команд Bower

Существует множество различных инструментов, облегчающих жизнь веб-разработчику. Одним из них является пакетный менеджер Bower. Он появился уже довольно давно и с тех пор в Интернете накопилось довольно много информации о том, как можно оптимизировать свою работу, используя этот полезный инструмент. Итак, вкратце о Bower: он очень сильно упрощает установку и обновление сторонних библиотек, которые обычно используются в большинстве проектов. Например, jQuery, Bootstrap или Fancybox. При использовании Bower, разработчику не нужно заходить на сайты этих библиотек и скачивать оттуда архивы, все можно сделать через консоль, написав несколько команд. В этой небольшой заметке, мне хотелось бы перечислить основные команды Bower. Пусть это будет своего рода шпаргалка для пользователей этого замечательного инструмента.

Итак, начнем с установки.

Всё. Установка завершена. Теперь можно пользоваться Bower’ом.

Переходим в папку вашего проекта (например, C:\OpenServer\domains\localhost\). В консоли вводим следующие команды:

> cmd
> cd C:\OpenServer\domains\localhost\

Теперь можно устанавливать необходимые JS-библиотеки. Чтобы посмотреть, какие библиотеки можно установить через Bower, можно зайти на официальный сайт http://bower.io/search/ или набрать в консоли следующую команду:

> bower search имя_пакета

Чтобы установить какой-либо пакет, используйте команду:

> bower install имя_пакета

Все пакеты по-умолчанию устанавливаются в папку bower_components, которая создается в папке проекта. Если вы хотите, чтобы библиотеки устанавливались в какую-нибудь другую папку, то нужно создать в папке проекта файл .bowerrc и указать в нем желаемый путь. Примерное содержимое файла (все пакеты будут устанавливаться в js/vendors/):

JavaScript

	{
	"directory" : "js/vendors/"
	} 
Если список библиотек, которые вы используете в ваших проектах практически не меняется, то есть возможность создать специальный файл-манифест, в котором перечислить все пакеты, которые необходимо установить. Чтобы создать такой файл, необходимо использовать команду:
> bower init
Вам будет задано несколько вопросов и в результате будет сформирован файл bower.json, в котором сохранится вся информация о пакетах, используемых в проекте.
Чтобы добавить новый пакет в этот файл, необходимо при установке воспользоваться ключом  –-save. Пример:
> bower install имя_пакета —save
Кстати, посмотреть установленные пакеты можно с помощью команды:
> bower list
Чтобы перенести набор библиотек из существующего проекта в новый:
нужно скопировать в папку нового проекта файл bower.json. При желании, вы можете отредактировать скопированный файл-манифест, например, изменить имя проекта, номер версии или что-то еще. Если вы меняли название папки для установки библиотек, то также нужно будет перенести и файл .bowerrc.

запустить в консоли команду:
> bower install


В результате все установится в папку нового проекта.
Удалять пакеты можно командой:
> bower uninstall имя_пакета
Для обновления пакетов используется утилита bower-update, которую нужно предварительно установить:
> npm install -g bower-update
Чтобы запустить обновление, запускаем команду:
> bower-update
В заключении заметки, хотелось бы привести еще одну команду, которая показывает список всех команд Bower. Это команда:
> bower help
На мой взгляд, Bower – очень полезный инструмент для веб-разработчика. Причем, пользоваться им несложно. Для того, чтобы его освоить вам потребуется совсем немного времени.
Пакетные менеджеры на примере Bower. | Нетипичный Web-разработчик
Не смотря на то, что в настоящее время сами разработчики пакетного менеджера 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 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:
Один из вариантов подключения плагина fancybox — bower
Один из вариантов подключения плагина fancybox — bower
Или вы можете воспользоваться специальной командой для поиска пакета по названию:
Поиск пакета
> bower search <package>
Например,
 > bower search jquery
Результат выполнения команды bower search jquery
Результат выполнения команды 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/
Друзья, ваши подписки, лайки и комментарии вдохновляют меня на написание качественного и интересного материала! Всем добра!
Внимание! Данный материал является авторским, запрещено любое использование материала без согласия автора статьи. 
 Bower — пакетный менеджер для Интернета 
 Web-сайты состоят из множества вещей — фреймворков, библиотек, ресурсов и утилит. Бауэр управляет всем этим за вас.
 Отследить все эти пакеты и убедиться, что они обновлены (или установлены на нужные вам версии) — непростая задача. Бауэр спешит на помощь!
 Bower может управлять компонентами, которые содержат HTML, CSS, JavaScript, шрифты или даже файлы изображений. Bower не объединяет и не минимизирует код и не делает что-либо еще — он просто устанавливает правильные версии необходимых вам пакетов и их зависимости.
 Для начала, Bower извлекает и устанавливает пакеты отовсюду, занимается поиском, поиском, загрузкой и сохранением того, что вы ищете. Bower отслеживает эти пакеты в файле манифеста,  bower.json . Как вы используете пакеты, зависит от вас. Bower предоставляет хуки для облегчения использования пакетов в ваших инструментах и ​​рабочих процессах.
 Bower оптимизирован для внешнего интерфейса. Если от одного пакета зависит несколько пакетов — например, jQuery — Bower загрузит jQuery только один раз.Это известно как плоский график зависимостей, и он помогает снизить нагрузку на страницу.
 Установить Bower 
 Bower — это утилита командной строки. Установите его с помощью npm.
  $ npm install -g bower  
 Bower требует node, npm и git.
 Последний выпуск:
 Для устранения неполадок при установке на различных платформах прочтите вики-страницу по устранению неполадок.
 Начало работы 
 Установить пакеты 
 Установить пакеты с  bower install .Bower устанавливает пакеты на  bower_components / .
  $ bower install   
 Пакет может быть сокращением GitHub, конечной точкой Git, URL-адресом и т. Д. Узнайте больше о  bower install .
  # устанавливает зависимости проекта, перечисленные в bower.json
$ bower install
# зарегистрированный пакет
$ bower установить jquery
# Сокращение GitHub
$ bower install desandro / masonry
# Конечная точка Git
$ bower install git: //github.com/user/package.мерзавец
# URL
$ bower install http://example.com/script.js  
 Поиск пакетов 
 Найдите пакеты Bower и найдите зарегистрированные имена пакетов для своих любимых проектов.
 Сохранение пакетов 
 Создайте файл  bower.json  для своего пакета с помощью  bower init .
 Затем сохраните новые зависимости в вашем  bower.json  с  bower install PACKAGE --save 
 Использовать пакеты 
 Как вы используете пакеты, зависит от вас.Мы рекомендуем вам использовать Bower вместе с Grunt, RequireJS, Yeoman и множеством других инструментов или создать собственный рабочий процесс с помощью API. Вы также можете напрямую использовать установленные пакеты, например, в случае  jquery :
    
 Обновления Twitter от @bower 
 Твиты от bower
 Блог Bower 
 ОБНОВЛЕНИЕ
: Yarn решила на данный момент отказаться от поддержки Bower.Мы все равно рекомендуем попробовать его как альтернативу npm!
 Вчерашний официальный выпуск Yarn добавляет новый интересный инструмент в мир менеджеров пакетов, устраняя разрыв между Bower и npm и добавляя наиболее востребованные функции к обоим.
 Yarn выглядит большим улучшением по сравнению с текущим клиентом Bower во многих отношениях, которые мы опишем. Это может помочь вам перейти на npm, если вы давно это искали.
 Поскольку Yarn уже поддерживает несколько форматов пакетов и экосистем, мы втайне надеемся, что это даст возможность разработчикам JavaScript для дальнейшего развития экосистемы модулей ES6 по сравнению с CommonJS, используемым сообществом npm, и AMD / globals, используемыми сообществом Bower.Браузеры и узел согласны.
 Yarn позиционирует себя как незаменимую замену как npm, так и Bower. Это означает, что вы сможете продолжать использовать существующий  bower.json , как и раньше. Yarn устанавливает компоненты bower в  bower_components , компоненты npm в  node_modules  и поддерживает выравнивание зависимостей!
  Важное примечание : В настоящее время, похоже, все еще существуют некоторые проблемы, связанные с поддержкой Bower. Однако мы уверены, что с помощью сообщества эти проблемы будут быстро решены по мере того, как Yarn приближается к 1.0 в ближайшие месяцы.
 Важно помнить, что, как и npm, Bower состоит не только из компонента интерфейса командной строки, и переключение между npm и экосистемой Bower все еще можно улучшить несколькими способами.
 Взгляните на еще несколько вкусностей, которые может предложить Yarn:
 Файл блокировки 
 Верные пользователи Bower будут очень рады видеть, что Yarn добавляет долгожданную функцию Lockfile с еще более строгой воспроизводимостью на разных устройствах и системах, чем предлагает npm на данный момент.
 Безопасность 
 Проверка каждого пакета по контрольной сумме перед его установкой гарантирует определенную степень целостности и дает разработчику больше уверенности с точки зрения безопасности.
 Скорость и офлайн 
 Кэш
 Yarn — это довольно сложное усовершенствование по сравнению с тем, что Bower предлагал до сих пор, благодаря значительному сокращению времени (холодной) установки и даже больше в сценарии с кешированием. В то же время он позволяет выполнять полную установку даже без подключения к Интернету!
 Лицензии 
 Возможность перечисления типа лицензии для зависимостей часто требуется в корпоративных средах.Yarn предлагает простой способ перечислить тип лицензии для данной зависимости.
 Добро пожаловать! 
 Вы можете узнать больше о Yarn в сообщении Facebook. Вместе с npm мы благодарим команду Yarn за его разработку (особенно Себастьяна). Надеемся на плодотворное сотрудничество.
 Начало работы с Bower [Статья] 
 Сейчас доступно больше библиотек и фреймворков для фронтенд-разработки, чем когда-либо прежде. Нередко в одном проекте задействовано пять или более таких библиотек.Но отслеживать все эти библиотеки и следить за их актуальностью бывает непросто. Откройте для себя Bower, менеджер пакетов, который упрощает управление всеми зависимостями внешнего интерфейса вашего приложения.
 Из этого сообщения в блоге вы узнаете, как начать работу с Bower. Вы начнете с установки утилиты командной строки Bower, а затем перейдете к изучению различных команд, доступных для управления пакетами.
 Приступим!
 Установка Bower 
 Bower можно установить с помощью npm, диспетчера пакетов узлов.Если у вас еще не установлен npm, перейдите на веб-сайт Node.js и загрузите соответствующую копию Node.js для своей системы. Программа npm включена в установку Node.js.
 После установки npm откройте Терминал (или Командную строку) и введите следующую команду:
  npm install -g bower
  
 Это установит Bower  глобально  в вашей системе.
 Теперь, когда у вас установлен Bower, мы можем начать изучать команды, которые используются для управления пакетами.
 Поиск пакетов 
 Есть два разных способа найти пакеты Bower. Либо с помощью каталога онлайн-компонентов, либо с помощью утилиты командной строки.
 Для поиска пакетов в командной строке используйте команду  search . После этого должен следовать ваш поисковый запрос.
  поиск беседки <запрос>
  
 Например, для поиска пакетов, содержащих слово «jquery», вы можете сделать следующее:
  поиск беседки jquery
  
 Эта команда вернет целый набор результатов, некоторые из которых показаны в приведенном ниже фрагменте.
  Результаты поиска:

    jquery git: //github.com/components/jquery.git
    jquery-ui git: //github.com/components/jqueryui
    jquery.cookie git: //github.com/carhartl/jquery-cookie.git
    jquery-placeholder git: //github.com/mathiasbynens/jquery-placeholder.git
    jquery-file-upload git: //github.com/blueimp/jQuery-File-Upload.git
    жасмин-jquery git: //github.com/velesin/jasmine-jquery
    jquery.ui git: //github.com/jquery/jquery-ui.git
    ...
  
 Каждый результат отображает имя пакета и конечную точку Git. Для установки пакета вам понадобится либо имя, либо конечная точка Git.
 Установка пакетов 
 Чтобы добавить в проект новый пакет Bower, используйте команду  install . В нем должно быть указано имя пакета, который вы хотите установить.
  bower install <пакет>
  
 Помимо имени пакета, вы также можете установить пакет, указав одно из следующих значений:
 Конечная точка Git, например  git: // github.com / components / jquery.git 
 Путь к локальному репозиторию Git.
 Сокращенная конечная точка, например  components / jquery . Бауэр предполагает, что используется GitHub, и в этом случае конечная точка является частью после  github.com  в URL-адресе репозитория.
 URL-адрес файла  zip  или  tar . Содержимое файлов будет извлечено автоматически.
 Вы можете установить определенную версию пакета, добавив знак решетки (#) после имени пакета, а затем номер версии.
  bower install <пакет> # <версия>
  
 Установленные пакеты будут помещены в каталог  bower_components . Он создается в папке, в которой выполнялась программа  bower . Вы можете изменить это место назначения, используя параметры конфигурации в файле  .bowerrc .
 bower_components
 jquery
 jquery.js
 jquery.min.js
 jquery.min.map
…
 modernizr
 После установки вы можете использовать пакет, просто добавив тег   

Установка пакетов с помощью файла bower.json

Если вы используете несколько пакетов в своем проекте, часто рекомендуется перечислить эти пакеты в файле bower.json . Это позволит вам установить и обновить несколько пакетов с помощью одной команды.

  {
  "имя": "название-приложения",
  "версия": "0.0.1",
  "dependencies": {
    "sass-bootstrap": "~ 3.0.0",
    "modernizr": "~ 2.6.2",
    "jquery": "~ 1.10.2"
  },
  "частный": правда
}
  

В простом примере выше показан файл bower.json , который определяет некоторую информацию о проектах, а также список зависимостей. Файл bower.json фактически используется для определения пакета Bower, поэтому по сути вы создаете свой собственный пакет, содержащий все зависимости для вашего приложения.

Свойства, используемые в этом примере, объясняются ниже.

• имя - Имя вашего приложения / пакета.
• версия - Номер версии вашего приложения / пакета.
• зависимости - Пакеты, которые требуются вашему приложению. Вы должны указать номер версии для каждого из этих пакетов, как показано в примере выше. Если указать latest , Bower установит самый последний выпуск пакета.
• private - установка этого свойства на true означает, что вы хотите, чтобы пакет оставался закрытым, и не хотите добавлять его в реестр в будущем.

После настройки файла bower.json вы можете просто выполнить команду bower install , чтобы установить все указанные вами пакеты.

Bower включает удобную утилиту, которая поможет вам создать файл bower.json для вашего проекта.Выполнение команды bower init в корне вашего проекта запустит интерактивную программу, которая создаст файл для вас. Однако вам все равно может потребоваться добавить некоторые пакеты в файл самостоятельно.

Примечание : Полный список свойств, которые можно добавить в файл bower.json , можно найти в спецификации.

Список установленных пакетов

Вы можете легко узнать, какие пакеты установлены, используя команду list .

  список беседок
  

Приведенный ниже фрагмент показывает результат для простого проекта, использующего jQuery, Modernizr и Sass. Обратите внимание, что Bower также проверяет, доступна ли более новая версия каждого из пакетов.

  bower check-new Проверка наличия новых версий зависимостей проекта.
yo-webapp # 0.0.0 / Пользователи / mattwest / веб-сайты / yo-webapp
├── jquery # 1.10.2 (последняя версия 2.0.3)
├── modernizr # 2.6.3 (последняя версия 2.7.1)
└─┬ sass-bootstrap # 3.0,2
  └── jquery # 1.10.2 (доступно 2.0.3)
  

Пакеты обновлений

Обновить пакет довольно просто. Если вы использовали файл bower.json , вы можете выполнить простую команду update , чтобы обновить все пакеты сразу. Однако инструмент обновления будет соответствовать ограничениям по версии, которые вы указали в файле bower.json .

  беседка обновить
  

Чтобы обновить отдельный пакет, вы снова используете команду update , на этот раз указав имя пакета, который вы хотите обновить.

  bower update <пакет>
  

Удаление пакетов

Чтобы удалить пакет, вы можете использовать команду uninstall , за которой следует имя пакета, который вы хотите удалить.

  bower uninstall <пакет>
  

Можно удалить сразу несколько пакетов, указав имена пакетов.

  bower удалить jquery modernizr sass-bootstrap
  

Последние мысли

Менеджеры пакетов произвели революцию в том, как мы делимся кодом.Они упростили использование библиотек кода, чем когда-либо прежде, и избавили от многих проблем, связанных с обновлениями.

Долгое время front-end разработчики смотрели на такие проекты, как RubyGems, с завистью; желая, чтобы однажды у нас тоже был простой способ управления зависимостями проекта. Бауэр предоставил нам этот инструмент. По мере того, как все больше отличных библиотек становятся обычным явлением среди наших веб-приложений, сложность наших проектов неизбежно возрастает. Бауэр дает нам способ справиться с этой сложностью.

Полезные ссылки

беседка - npm

..psst! Пока Bower поддерживается, мы рекомендуем yarn, webpack или parcel для новых интерфейсных проектов!

Bower предлагает общее, неоправданное решение проблемы внешнего управления пакетами , при этом раскрывая модель зависимости пакетов через API, который может быть использован более самоуверенным стеком сборки. Нет общесистемных зависимостей, никакие зависимости не являются общими для разных приложений, а дерево зависимостей является плоским.

Bower работает поверх Git и не зависит от пакетов. Упакованный компонент может состоять из активов любого типа и использовать любой тип транспорта (например, AMD, CommonJS и т. Д.).

Посмотреть полные документы на bower.io

Просмотреть все пакеты, доступные в реестре Bower.

Установить

Bower зависит от Node.js и npm. Также убедитесь, что git установлен как некоторая беседка
пакеты требуют его загрузки и установки.

Использование

См. Полный справочник по командной строке в bower.io / docs / api /

Установка пакетов и зависимостей

 # установить зависимости, перечисленные в bower.json
$ bower install

# устанавливаем пакет и добавляем его в bower.json
$ bower install <пакет> - сохранить

# установить определенную версию пакета и добавить ее в bower.json
$ bower install  #  --save 

Использование пакетов

Мы не рекомендуем использовать компоненты bower статически из соображений производительности и безопасности (если компонент имеет загрузку .php , который не игнорируется и может быть легко использован для злонамеренных действий).

Наилучший подход - обрабатывать компоненты, установленные bower, с помощью инструмента сборки (например, Grunt или gulp) и обслуживать их объединенными или с использованием загрузчика модулей (например, RequireJS).

Удаление пакетов

Для удаления локально установленного пакета:

 $ bower uninstall <имя-пакета> 

пользователи prezto и oh-my-zsh

На prezto или oh-my-zsh не забудьте alias bower = 'noglob bower' или bower установить jquery \ # 1.9,1

Никогда не запускайте Bower с sudo

Bower - пользовательская команда; нет необходимости запускать его с правами суперпользователя.

Пользователи Windows

Для использования Bower в Windows необходимо установить
Git для Windows правильно. Обязательно проверьте
варианты, показанные ниже:

Обратите внимание, что если вы используете TortoiseGit и если Bower продолжает запрашивать ваш SSH
пароль, вы должны добавить следующую переменную среды: GIT_SSH - C: \ Program Files \ TortoiseGit \ bin \ TortoisePlink.exe . Отрегулируйте TortoisePlink
путь при необходимости.

Пользователи Ubuntu

Чтобы использовать Bower в Ubuntu, вам может потребоваться связать исполняемый файл nodejs с узлом :

  sudo ln -s / usr / bin / nodejs / usr / bin / узел
  

Конфигурация

Bower можно настроить с помощью JSON в файле .bowerrc . Прочтите доступные параметры на bower.io/docs/config.

Поддержка

Задавать вопросы можно по следующим каналам для заказа:

Вклад

Мы приветствуем любые пожертвования от кого угодно.Найдите минутку, чтобы ознакомиться с инструкциями по участию.

Обратите внимание, что в Windows для прохождения тестов вам необходимо настроить Git перед клонированием:

  git config --global core.autocrlf input
  

Сторонники

Поддержите нас ежемесячным пожертвованием и помогите нам продолжить нашу деятельность. [Стать спонсором]

Спонсоры

Станьте спонсором и разместите свой логотип в нашем README на Github со ссылкой на свой сайт.[Стать спонсором]

Лицензия

Авторские права (c) Твиттер с 2012 г. по настоящее время и другие участники

По лицензии MIT

Как начать работу с Bower

Одна из вещей, с которой мы, программисты, ежедневно боремся - это продуктивность; мы хотим делать вещи лучше и в то же время быстрее, каждый день.

Это то, что мы не можем контролировать, теперь нам нужно сделать больше: больше скриптов для загрузки, установки и даже больше фреймворков для работы. В каждом проекте мы загружаем хотя бы один плагин jQuery и даже сам jQuery; каждый раз, когда это происходит, нам нужно перейти на веб-сайт плагина, загрузить его или сделать ссылку на него.

Несмотря на то, что мы привыкли к этому, и сначала это даже не кажется большим количеством времени, эти маленькие отрезки времени накапливаются. Итак, чтобы решить проблему, мы используем Bower.

Что такое Бауэр?

Говоря простым языком, Bower - это менеджер пакетов для Интернета, он был создан Twitter и помогает загружать все ресурсы, необходимые для вашего проекта, с помощью простых командных строк, экономя ваше время и усилия.

Как им пользоваться?

Чтобы начать использовать этот инструмент, вам сначала необходимо установить его, и если на вашем компьютере установлены NPM и Node, это так же просто, как запустить эту команду:

Если вы планируете получать некоторые пакеты с помощью git, у вас также должен быть установлен этот пакет на вашем компьютере, но при условии, что у вас есть все это, теперь bower установлен и готов к использованию.

Получение пакетов

Bower использует файл bower.json, чтобы узнать, какие пакеты вам нужны для проекта. Если у вас есть этот файл, все, что вам нужно сделать, это запустить:

Если у вас еще нет этого файла, что наиболее вероятно, если вы только начинаете работать с Bower и хотите загрузить пакет для своего приложения, которое необходимо запустить:

 bower install <имя-пакета> 

Например:

Вы также можете найти что-то, если не уверены, запустив:

 bower search <имя-пакета> 

Это даст вам список всех пакетов, которые соответствуют условиям вашего поиска, чтобы вы могли установить тот, который вам нужен.

Вы можете установить эти пакеты прямо из реестра Bower или разными способами:

• Общедоступная конечная точка Git (вам необходимо установить git) git: //github.com/someone/package.git
• Частный репозиторий Github: https://github.com/someone/package.git
• Локальная папка
• Общедоступная или частная удаленная конечная точка Subversion: svn + http: //package.googlecode.com/svn/
• URL-адрес файла, включая файлы zip и tar , которые будут извлечены.

Как видите, вам не нужно полагаться на реестр, вы можете использовать этот инструмент с любым пакетом, который, как вы знаете, имеет хороший код в Интернете.

В некоторых случаях вам также может потребоваться определенная версия инструмента, и с помощью Bower вы также можете загрузить ее, добавив знак фунта и номер версии после имени пакета:

 bower install <пакет> # <версия> 

Например:

Если вы просто хотите увидеть все пакеты, которые вы установили локально, вы можете запустить:

Если вы запустите эту команду и увидите что-то, что на самом деле больше не используете, вы также можете удалить пакеты, набрав:

 bower uninstall <имя-пакета> 

Получение этих пакетов

Допустим, вы установили все необходимые пакеты и теперь хотите узнать их местонахождение, чтобы вставить их в документ и начать работу.

По умолчанию все пакеты находятся в папке с именем bower_components и затем разделены по имени пакета, например jQuery будет в:

 /bower_components/jquery/jquery.js 

Это местоположение по умолчанию, но вы также можете создать отдельный файл конфигурации, который будет читать bower, и указать там ваше предпочтительное местоположение.

Сначала создайте файл .bowerrc и добавьте желаемое расположение для ваших пакетов:

 {
      "каталог": "приложение / компоненты"
    } 

Конечно, это не все, что вы можете настроить в этом файле, и если вы действительно хотите увидеть более сложную конфигурацию, вы можете посетить спецификацию bower и прочитать обо всем, что вы можете сделать в этом файле.

Заключение

В последнее время мы наблюдаем рост такого рода инструментов командной строки.

Bower выделяется тем, что заполняет пробел в нашем рабочем процессе и просто автоматизирует его. Если вы разрабатываете много сайтов, вам стоит это проверить.

Руководство для начинающих: начало работы с Bower Package Manager

Bower - это интерфейсный менеджер пакетов, созданный Twitter. Также известный как менеджер пакетов для Интернета, bower используется в современных проектах с открытым и закрытым исходным кодом для решения многих повторяющихся проблем.

Эта статья проведет вас через базовое и расширенное использование bower в командной среде. Я также поделюсь своим личным рабочим процессом при работе с bower с командой разработчиков.

Проблемы, которые решает беседка

В настоящее время разработка веб-сайта или веб-приложения требует использования многих интерфейсных фреймворков, таких как Bootstrap, jQuery, Angular и т. Д.

1. Для загрузки каждого из этих пакетов необходимо перейти на соответствующий веб-сайт, найти подходящую версию, загрузить ее, разархивировать и, наконец, переместить основные файлы в папку поставщика.(например: основной файл в пакете jquery - это jquery.js)
2. После загрузки файлов в репозиторий вам необходимо вручную посетить все указанные выше веб-сайты (jquery.com, angularjs.com, bootstrap.com), чтобы проверить наличие обновлений и угадайте, что? Если есть обновление, вам нужно повторить шаг 1 для каждого пакета / обновления.
3. Предположим, мы собираемся использовать Bootstrap, для которого требуется jQuery (называемый зависимостью). Когда вы перейдете на getbootstrap.com, чтобы загрузить его, вам нужно будет перейти к jquery.com, чтобы также загрузить jquery.

Таким образом, bower помогает управлять интерфейсными пакетами. Это помогает вам загружать их, обновлять и устранять их зависимости.

Есть и другие преимущества использования bower, которые мы обсудим позже в этой статье, но это основные проблемы, которые bower решает для нас!

Установка и использование

Установка беседки

Bower - это узловой модуль, который можно установить с помощью следующей команды:

  npm install -g bower
  

Это установит bower глобально в вашей системе.

Если на вашем компьютере не установлен узел, вам необходимо загрузить его с узла nodejs.org.

Установка пакетов

В этом руководстве мы будем использовать bower для установки начальной загрузки. Процесс будет работать для любого другого пакета.

  bower install bootstrap
  

Это установит программу начальной загрузки во вновь созданную папку / bower_components (на корневом уровне).

Обратите внимание, что это установит bootstrap 3.2.x, которая является последней версией на момент написания этой статьи. Если мы хотим установить последнюю версию в 2.x, нам нужно запустить:

  bower install bootstrap # 2
  

мы также можем указать точную версию с

  bower install bootstrap # 2.2
  

Также обратите внимание, что, поскольку начальная загрузка зависит от jQuery, выполнение любой из предыдущих команд также автоматически установит jQuery, чтобы разрешить зависимости начальной загрузки.

Обновление пакетов

Если мы хотим обновить все наши пакеты, нам просто нужно запустить следующую команду:

  беседка обновить
  

Включая скрипты

Последним шагом будет включение загруженных стилей и скриптов.Поскольку все они находятся в папке / bower_components , мы должны написать следующее:

Общий рабочий процесс в командной среде

После использования bower описанным выше минималистичным способом мы понимаем, что он привносит новые проблемы при работе с системой управления версиями и / или в командной среде.

1. Bower не только загружает основные файлы дистрибутива, но также загружает весь репозиторий jquery, bootstrap и т. Д. Это может привести к чрезмерному увеличению вашей истории контроля версий и не рекомендуется.
2. Также основные файлы дистрибутива (dist / jquery.js, dist / css / bootstrap.css) не минимизируются, и bower никогда не минимизирует файлы распространения, потому что это менеджер пакетов, а не инструмент сборки.
3. Вы должны вручную загрузить jquery перед загрузкой bootstrap (потому что bootstrap имеет jquery в качестве зависимости).
4. Вам необходимо вручную добавлять новый тег

   Шаг 7: Больше автоматизации беседки

   Вы можете дополнительно автоматизировать беседку. Допустим, вы работаете в команде и добавляете новый компонент bower ( bower install typeahead.js ). Вы же не хотите отправлять всем электронное письмо с просьбой запустить bower install . Мы можем автоматизировать это с помощью grunt-watch и grunt-exec:

     часы: {
           меньше: {
                   файлы: ['беседка.json '],
                   задачи: [‘exec: bower_install”]
           },
   },
   exec: {
           bower_install: {
                   cmd: «установка беседки»
           }
   }
     

   Здесь происходит то, что всякий раз, когда вы редактируете файл bower.json, grunt автоматически запускает команду bower install . Когда вы фиксируете свои изменения и ваш коллега извлекает ваш код, grunt-watch обнаружит изменение в bower.json , которое затем автоматически запустит команду bower install .

   Как настроить беседку в собственном рабочем процессе

   Когда дело доходит до менеджеров пакетов, я часто использую их в своем рабочем процессе. Я использую npm для управления grunt и его плагинами. Composer для управления моими библиотеками поставщика PHP, bower для управления моими интерфейсными пакетами и, наконец, ruby ​​gems для управления Capistrano (пакет, который используется для автоматизации развертывания).

   Я решил, что хочу, чтобы npm был главным менеджером пакетов . Итак, я начал упаковывать все основные команды в свой пакет .раздел сценария json . Например:

   • npm run migrate : переносит базу данных и генерирует файлы миграции (для PHP)
   • npm test : запускает модульные тесты
   • npm run protractor : запускает end-2-end тесты
   • npm run deploy-staging : развертывает код на промежуточных машинах
   • npm run deploy-production : развертывает код на производственных машинах
   • npm start : запускает npm install (предварительный запуск), bower update (после установки) и, наконец, grunt

   Вот что происходит за кадром.0,4,6 дюйма,

   },

   "scripts": {

   "предварительный запуск": "установка npm",

   "postinstall": "bower update --unsafe-perm",

   "start": "grunt"

   }

   }
   

   Если вы посмотрите на раздел сценариев, вы увидите, что prestart: мы запускаем npm install . Поскольку package.json включен в наш репозиторий, если кто-то добавит новую devDependency, нам нужно будет легко установить ту же версию. (Обратите внимание, что pre start - это первая команда, запускаемая при запуске npm start).

   post install (который запускается с помощью npm install ) запускает следующую команду: bower update --unsafe-perm ( --unsafe-perm был добавлен только потому, что bower-update не работал на Mac). Это позволит поддерживать все наши клиентские пакеты в актуальном состоянии.

   start: и, наконец, запуск команды grunt .

   При такой настройке всякий раз, когда любой разработчик из вашей команды хочет начать работу над проектом, он просто переходит в каталог проекта и запускает npm start , чтобы сразу же начать работу.

   Использование этого подхода очень эффективно, поскольку вы можете включать другие сценарии для запуска из npm, например npm run migrate , npm run deploy-staging и т. Д.

   Используя этот подход, мы не только поощряем использование командной строки и автоматизацию, но и делаем ее единообразной.

   Как видите, мы связали npm install с bower update . Вы можете пойти дальше и связать все остальные менеджеры пакетов с помощью npm install .В таком случае при запуске npm install будут выполняться все следующие команды:

   • Обновление беседки
   • обновление композитора --no-dev
   • обновление камня

   Завершение

   Bower - потрясающий инструмент, решающий фундаментальные проблемы с современными веб-приложениями. Всем людям предлагается использовать его (и даже новая Visual Studio сейчас поставляется с Bower и Grunt / Gulp).

   Его можно легко настроить при самостоятельной разработке, однако, если вы работаете в команде, вам необходимо выполнить шаги, представленные в этой статье, чтобы обеспечить плавный рабочий процесс между всеми разработчиками в команде.

   Управляйте зависимостями внешнего интерфейса с помощью Bower

   7 июня 2015 г.

   Bower - отличный менеджер зависимостей, специально созданный для помощи в управлении различными интерфейсными библиотеками.

   Это сокращает время и энергию, необходимые для поиска в сети таких библиотек, как Susy и jQuery, помогая устанавливать, обновлять или удалять их с помощью одной команды.

   В довершение всего, он может помочь вам загрузить все библиотеки, которые вам нужны, когда вы создаете шаблон для нового проекта с помощью одной команды.

   В этой статье мы поговорим о том, как установить Bower и как им пользоваться.

   Установка Bower

   Bower требует, чтобы в вашей системе были установлены 3 устройства:

   1. NodeJS
   2. Диспетчер пакетов узлов (npm)
   3. Git

   Вы можете установить NodeJS, загрузив установщик с его веб-сайта и дважды щелкнув по нему.

   Npm поставляется вместе с установкой NodeJS, поэтому вам не нужно устанавливать для него ничего лишнего.

   Наконец, пользователям Windows нужно будет загрузить и установить git, если вы еще этого не сделали. На Mac по умолчанию установлен Git.

   После установки этих трех предварительных условий вы можете установить bower, запустив командную строку и введя следующую команду:

     $ npm установить bower -g
     

   npm - это команда, доступная в командной строке после установки npm. Команда install сообщает npm, что нужно установить пакет узла, который можно найти на npmjs.com.

   Bower - один из таких пакетов, поэтому мы устанавливаем его с помощью npm.

   Последний флаг -g сообщает npm о необходимости глобальной установки Bower, что позволяет использовать команду bower в любом месте вашего компьютера.

   Теперь мы готовы начать управление зависимостями с помощью Bower! Давайте начнем с создания пустой папки под названием test и перейдем в нее.

   Создание файла bower.json

   Bower просматривает файл с именем bower.json , чтобы определить зависимости в вашем проекте, поэтому вам нужно убедиться, что вы создали эту bower.json первый.

   Вы можете сделать это, запустив bower init из командной строки.

     $ bower init
     

   После нажатия Enter, Бауэр сразу же задаст вам ряд вопросов и в конце создаст для вас файл bower.json .

   После создания файла bower.json вы можете приступить к установке библиотек в свой проект.

   Установка пакетов Bower

   Между прочим, библиотеки в Bower и npm также называются пакетами (на случай, если вам интересно, откуда взялось слово «пакет»).

   Вы можете устанавливать пакеты с помощью Bower так же, как вы устанавливаете пакеты с помощью npm. Разница в том, что вместо этого вам придется использовать команду bower .

   Итак, запустите свою командную строку и введите это:

     $ bower install jquery --save
     

   Bower установит последнюю версию jQuery с помощью этой команды. Дополнительный флаг --save указывает Bower добавить jQuery в файл bower.json в качестве зависимости.

   Если вы сейчас посмотрите на свои папки, вы увидите каталог bower_components , за которым следует папка jquery внутри него.

   Давайте попробуем использовать только что установленный пакет jQuery.

   Использование библиотеки, установленной с Bower

   Прежде чем использовать его в своем проекте, сначала необходимо определить файлы, которые вам нужны в пакете.

   Вот где я запутался, когда впервые начал работать с Bower.

   Bower позволяет разработчикам свободно структурировать свои пакеты Bower. Это означает, что каждый пакет Bower отличается, и вам нужно будет найти правильный файл для каждого пакета.

   Поначалу это может показаться сложным, так что давайте рассмотрим это вместе.

   Сначала вам нужно перейти к папке jquery в bower_components .

   Вы увидите, что в этом пакете есть папка src и папка dist .И src , и dist - это короткие имена для папок, которые используют разработчики. src означает источник, а dist означает распространение.

   В этом случае вам нужно искать в дистрибутив .

   Здесь вы найдете jquery.js , что мы и ищем.

   Что вам нужно сделать, чтобы использовать этот файл, так это сослаться на этот скрипт в вашем html. Если у вас есть файл index.html в папке test , вы можете использовать эту библиотеку jQuery со следующим кодом:

   Это процесс использования файлов Javascript, установленных вместе с Bower.

   Помимо библиотек JavaScript, вы также часто можете найти библиотеки Sass. Давайте попробуем установить Susy и использовать ее с Sass.

   Использование библиотеки Sass с Bower

   Susy можно установить так же, как и jQuery - с помощью команды bower install .

     $ bower install susy --save
     

   Убедитесь, что у вас есть папка susy в каталоге bower_components и зависимость susy в вашем bower.json файл.

   Подобно тому, что мы делали раньше с пакетом jQuery, вам нужно заглянуть в папку susy , чтобы узнать, какие файлы добавить в ваш проект Sass.

   В данном случае вам нужен файл susy.scss , который находится в папке sass .

   Затем вы должны импортировать этот файл в партиал Sass. Код будет:

     @import "../bower_components/susy/sass/susy";
     

   И мы закончили добавление файла Sass из пакета bower в ваш проект!

   Пока все хорошо.Давайте сделаем шаг назад и посмотрим, как искать пакеты в Bower, если вы не уверены в названии пакета, который пытаетесь установить.

   Поиск пакетов Bower

   Допустим, вы пытаетесь установить библиотеку точки останова от Team Sass (которая изменила репозиторий github на at-import), но вы не слишком уверены, называется ли пакет bower точкой останова.

   В этом случае вы можете найти пакет точки останова с помощью команды bower search .

     $ bower search точка останова при поиске
     

   Как видите, для точки останова есть несколько результатов. Если бы вы пошли дальше и набрали bower install breakpoints , вы бы установили неправильный пакет bower.

   Так что, если вы не уверены, лучше всего всегда сначала искать пакет Bower, загляните в их репозиторий git, прежде чем решать, что установить.

   Другой способ - просмотреть документацию, поскольку большинство авторов пакетов расскажут вам, как установить свой пакет через Bower.

   Теперь давайте посмотрим, как Bower может помочь вам установить все ваши зависимости с помощью всего одной команды!

   Установка зависимостей одной командой

   Сначала удалите папку bower_components .

   Затем запустите эту команду:

     $ bower установить
     

   Затем

   Bower просмотрит ваш bower.json и загрузит для вас все зависимости. После этого вы сможете найти свои зависимости обратно в папке bower_components .

   Это упрощает автоматизацию строительных лесов и позволяет членам группы быстро запускать свой проект с правильными зависимостями.

   Как насчет удаления пакетов, которые вам не нужны?

   Удаление пакетов Bower

   Удаление пакетов Bower почти такое же, как их установка. Вам просто нужно вместо этого использовать команду bower uninstall .

     $ bower удалить susy --save
     

   И с помощью этой команды Susy будет удалена как из вашей папки, так и из вашей беседки.json файл.

   Это основная штука Бауэра. А теперь давайте поговорим о более продвинутом (но полезном) материале. Это то, что меня сбило с толку, когда я изначально хотел использовать Bower в своих проектах.

   Продвинутый материал для беседки

   Хорошо. В этом разделе мы рассмотрим:

   1. Как установить определенную версию библиотеки
   2. Что делать, если есть конфликтующая версия библиотеки
   3. Как обновить все пакеты Bower до последних доступных версий
   4. Как изменить расположение папки bower_components

   Установка определенной версии пакета

   Допустим, вы обнаружили, что вам нужно использовать jQuery версии 1.11.3 вместо 2.1.4, которую мы установили. Вы можете установить эту конкретную версию, добавив # и номер версии, которую вы пытаетесь установить.

   Вот что вы будете делать:

     $ bower install jquery # 1.11.3 - сохранить
     

   Это позволит установить jQuery v1.11.3 в ваш проект.

   Однако, поскольку в вашем проекте уже есть jQuery v2.1.4, вы столкнетесь с конфликтом зависимостей.

   Разрешение конфликтов зависимостей

   Bower знает, когда у вас установлены две версии одной и той же библиотеки, и просит вас выбрать между ними, когда это происходит.

   Все, что вам нужно сделать, это выбрать правильную версию с 1 или 2 , и Bower автоматически разрешит конфликт.

   Поскольку сейчас мы используем более старую версию jQuery, давайте поговорим о том, как мы можем обновить ее до последней версии с помощью Bower.

   Обновление пакетов Bower до последних версий

   Время от времени, когда вы создаете строительные леса для новых проектов, вы, вероятно, захотите поднять свои зависимости до последней возможной версии.

   Это, к сожалению, невозможно с собственной командой Bower bower update .

   Что мне помогло с этой проблемой, так это пакет npm bower-update, написанный @sagepin

   Давайте сначала установим этот пакет через npm:

     $ npm установить bower-update -g
     

   Этот пакет дает вам возможность использовать команду bower-update .

     $ бауэр-апдейт
     

   Что он делает, так это то, что он просматривает все компоненты bower в вашем проекте и проверяет, являются ли они последней версией.Затем это дает вам возможность индивидуально обновить каждый пакет до последней версии.

   Если вы запустите эту команду bower-update в папке test , вы получите следующий запрос:

   Единственное, что мне не нравится в команде bower-update , это то, что она добавляет объект «разрешения» в файл bower.json .

   Сам не нашел необходимости в разрешениях и часто удаляю вручную.

   Наконец, давайте посмотрим, как мы можем изменить каталог, в который Bower устанавливает свои файлы.

   Изменение каталога компонентов беседки

   Bower теперь по умолчанию устанавливает ваши компоненты в bower_components в корневой папке.

   Однако в более старых версиях Bower по умолчанию устанавливает их в app / bower_components .

   Это несоответствие может вызвать некоторые проблемы, поскольку расположение bower_components невероятно важно.

   Хорошая новость заключается в том, что вы можете управлять этим установочным каталогом с помощью файла .bowerrc , который следует поместить в папку, в которой вы запускаете команды bower.

   Когда у вас есть файл .bowerrc , все, что вам нужно сделать, это указать каталог, в который bower должен устанавливать свои компоненты. Я предпочитаю оставлять свой как app / bower_components .

     {
     "каталог": "app / bower_components"
   }
     

   Завершение

   Это все, что вам нужно знать о Bower, чтобы использовать его в своих проектах.

   Вы узнали, как устанавливать, обновлять и использовать пакеты, которые вам нужны. Вы также научились удалять пакеты, которые вам больше не нужны.

   Более того, вы узнали, как настроить каталог, в который Bower устанавливает пакеты, и это поможет вам вписать Bower в свой проект, независимо от того, как он выглядит.

   Как вы относитесь к Бауэру после прочтения этой статьи? Удалось ли вам уже интегрировать его в свои проекты? Позвольте мне знать в комментариях ниже!

   Если вам понравилась эта статья, расскажите о ней другу! Поделитесь этим в Твиттере.