Bower как пользоваться: Bower — зачем нужен, установка и настройка

Leave a Comment / Разное / By /

Менеджер пакетов Bower

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

Для чего нужен Bower?

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

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

Например, вы хотите включить в ваш проект библиотеку jQuery. Раньше вам пришлось бы идти на официальный сайт, скачивать архив, распаковать и перетащить нужный фйл в проект. С помощью Bower это можно сделать одной строкой: bower install jquery. В результате jQuery будет установлена в папку bower_components вашего проекта.

Установка Bower

Для работы с нашим менеджером пакетов потребуются Node.js, npm (пакетный менеджер, входящий в Node. js) и Git. Скачайте Node.js с официального сайта и установите его.

Для проверки узнаем версии

Node.js и npm, набрав в консоли node ‑v и npm ‑v соответственно.

Мы убедились, что все работает и теперь можем перейти к установке Bower, для этого наберите в консоли npm install -g bower. Ключ –g означает, что пакет (в данном случае Bower) будет установлен глобально. Без этого ключа пакет будет установлен в текущей директории.

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

Пакеты можно установить командой bower install <пакет>. Например:

# имя пакета
bower install jquery

# ссылка на git-репозиторий (относительная) 
bower install desandro/masonry

# ссылка на git-репозиторий (полная)
bower install git://github.com/user/package.git

# URL
bower install http://example. com/script.js

Посмотреть установленные пакеты можно командой

bower list. Удаляется пакет командой bower uninstall <пакет>.

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

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

bower install jquery#1.8.3
bower install git://github.com/components/jquery.git#~1.8.3
bower install components/jquery#1.8.x

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

Если вы не уверены, что требуемый пакет существует, введите в консоли bower search <пакет>. Также вы можете воспользоваться онлайн сервисом:

Если вы хотите посмотреть все установленные пакеты, — введите bower list.

Настройка Bower для проекта

Для использования Bower в проекта вам потребуются 2 файла:

  • .bowerrc — файл, указывающий куда будут загружается компоненты.
  • bower.json Файл, который говорит менеджеру пакетов, какие нужны пакеты.

Директория с компонентами

По-умолчанию, Bower устанавливает пакеты в каталог bower_components, что не всегда требуется. Чтобы изменить каталог по-умолчанию, мы должны создать файл .bowerrc:

// .bowerrc
{
    "directory": "libs"
}

Теперь пакеты будут устанавливаться в папку libs. Теперь давайте поговорим об установке нескольких пакетов сразу.

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

Обычно для проекта вы будете иметь больше, чем один пакет и каждый раз писать bower install для каждого пакета — приятного мало. Давайте создадим файл bower.json с пакетами, которые нам нужны:

// bower.json
{
    "name": "sample-app",
    "version": "1.0.0",
    "dependencies": {
        "bootstrap": "latest",
        "font-awesome": "latest",
        "animate.
  css": "latest",
        "angular": "latest"    
    }
}

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

Используем наши Bower-пакеты

Теперь у нас есть все пакеты, которые нам нужны в нашем проекте. Все, что мы должны теперь сделать — это сослаться на них в документе:

<!-- index.html -->
<!doctype>
<head>
    <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="libs/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="libs/animate.css/animate.min.css">

    <script src="libs/jquery/jquery.min.js"></script>
    <script src="libs/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="libs/angular/angular.
 
 min.js"></script>
</head>

...

Зачем нужен Bower? Как использовать Bower? Введение в Bower.

Зачем нужен Bower и с чем его едят — наверно, каждый, кто в первый раз сталкивается с ним, задаётся этим вопрос. Bower, это такой же пакетный менаджер, как и Composer, но для Javascript, а не PHP, который очень сильно упрощает работу с пакетами. Из преимуществ следует отметить то, что мы легко можем получить любой пакет, а так же обновить его до последней версии.

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

Введение в Bower

Bower — это пакетный менаджер для Javascript, используя который, можно легко, к примеру, получить библиотеку jQuery не пользуясь браузером. Всё что нам потребуется, это набрать в консоли bower install jquery и вот у нас уже есть это библиотека.

Для того, чтобы начать использовать Bower, его нужно установить. Устанавливается он для разных ОС и дитрибутивов по-разному. Поэтому какой-то дополнительной информации, кроме, которая есть на оф.сайте Bower я не буду добавлять. Не будем плодить тырнет неработающими статьями по установке Bower, которых и так достаточно. Скажу только, что вам потребуется установленный Node.js, npm и Git.

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

После установки, перейдем в корень директории вашего проекта и создадим конфигурационный файл

.bowerrc для Bower с таким содержимым:

{
  "directory": "public_html/assets/"
}

Как вы уже заметили, Bower тоже используется JSON как и Composer. В только что созданном файле мы указали директорию установки всех пакетов по умолчанию.

Теперь давайте установим jQuery:

bower install jquery

После успешного выполнения комманды у нас в public_html/assets будет лежать папка jquery с одноименной библиотекой, которую мы можем подключить.

Я указал директорию по умолчанию к папке с вложениями используемыми на сайте, как вариант. Скорее всего, вы задались вопросом «что делать с лишними файлами»? Всё очень просто. Удалять их нет необходимости, если вы используете Git. Достаточно создать в директории assets файл .gitignore

где мы можем указать все директории или файлы, которые не желаем видеть в репозитории, тем самым они туда никогда не попадут, независимо от того, сколько раз мы обновим библиотеку. Если же вы не пользуетесь Git — начините. Хватит оставаться в пещере.

Теперь предлагаю установить библиотеку, которая не зарегистрирована в Bower. К примеру установим это https://github.com/bupy7/Gallerama. Это моя галерея, когда-то мной написанная, но так и не доведенная до ума. Если мы вобьём название репозитория в поиск, то получим фигу, потому что там отсутствует файл bower.json в отличии от https://github.com/objectivehtml/FlipClock где этот файл есть и мы прекрасно можем найти этот репозиторий если напишем

bower search objectivehtml/flipclock

и так же просто его установим

bower install objectivehtml/flipclock

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

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

bower install https://github.com/bupy7/Gallerama.git

И эта библиотека у нас появится в папке с остальными.

Зачем нужен Bower

Этот вопрос, я надеюсь исчерпан. Удобная штука, не правда ли?)

Итог

Всё это, конечно, поверхностная информация, поэтому обязательно почитайте оф.документацию http://bower.io/ , мы много чего еще не использовали.

Bower — менеджер пакетов для Интернета

…psst! Пока Bower поддерживается, мы рекомендуем использовать Vite для интерфейсных проектов. Читайте, как мигрировать!

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

Отследить все эти пакеты и убедиться, что они обновлены (или установлены для конкретных версий, которые вам нужны) непросто. Бауэр в помощь!

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 установить jquery
# GitHub сокращение
$ Bower установить desandro/masonry
# Конечная точка Git
$ Bower установить git://github.com/user/package.git
# 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

… псс! Пока Bower поддерживается, мы рекомендуем использовать Vite для интерфейсных проектов. Читайте, как мигрировать!

Bower можно настроить с помощью JSON в файле .bowerrc. Например:

 {
  "каталог": "приложение/компоненты/",
  "тайм-аут": 120000,
  "реестр": {
    "поиск": [
      "http://локальный:8000",
      "https://registry.bower.io"
    ]
  }
}

Размещение и заказ

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

  • Аргументы CLI через --config
  • Переменные среды
  • Локальный . bowerrc расположен в текущем рабочем каталоге
  • Все файлы .bowerrc вверх по дереву каталогов
  • Файл .bowerrc , расположенный в домашней папке пользователя ( ~
    )
  • Файл .bowerrc , расположенный в глобальной папке (/)

Пример аргументов CLI:

  • --config.endpoint-parser=<парсер>
  • --config.storage.packages=

Пример допустимых переменных среды:

  • bower_endpoint_parser оценивается как endpoint-parser
  • Bower_storage__packages оценивается как storage.packages

Пример допустимых переменных среды с соглашением Array:

  • export bower_registry__search='[http://localhost:8080, http://registry.bower.io]'; беседка установить

Спецификация .

bowerrc

Доступные переменные конфигурации в формате .bowerrc :

 {
  "cwd": "~/.мой-проект",
  "каталог": "bower_components",
  "реестр": "https://registry.bower.io",
  "сокращенно-преобразователь": "git://github.com//.git",
  "прокси": "http://proxy.local",
  "https-прокси": "http://proxy.local",
  "ca": "/var/certificate.pem",
  "цвет": правда,
  "тайм-аут": 60000,
  "сохранить": правда,
  "точное сохранение": правда,
  "строгий-ssl": правда,
  "место хранения": {
    "пакеты": "~/.bower/packages",
    "реестр": "~/.bower/реестр",
    "ссылки" : "~/.bower/ссылки"
  },
  «интерактивный»: правда,
  "резольверы": [
    "mercurial-bower-resolver"
  ],
  "мелкие клоны": [
    "myGitHost.example.com"
  ],
  "скрипты": {
    "предустановить": "",
    "после установки": "",
    "предварительно удалить": "",
    "после удаления": ""
  },
  "игнорированные зависимости": [
    "jquery"
  ]
}

Подробное описание доступных переменных конфигурации можно найти в репозитории bower/spec.

Переменные среды в .bowerrc

Можно использовать переменные среды в .bowerrc , используя следующий синтаксис ${ENV_VAR} .

 "хранилище" : {
  "пакеты": "/path/to/${USER}/packages"
}

Хуки

Bower предоставляет 3 отдельных хука, которые можно использовать для запуска других автоматизированных инструментов во время использования Bower. Важно отметить, что эти хуки предназначены для того, чтобы внешние инструменты помогали подключать вновь установленные компоненты к родительскому проекту и другим подобным задачам. Эти хуки не предназначены для предоставления этапа сборки после установки для авторов компонентов. Таким образом, конфигурация этих хуков представлена ​​в .bowerrc в каталоге родительского проекта.

В .bowerrc сделать:

 {
  "скрипты": {
    "preinstall": "<здесь ваша команда>",
    "postinstall": "<здесь ваша команда>",
    "preuninstall": "<здесь ваша команда>",
    "postuninstall": "<здесь ваша команда>"
  }
}

Значение каждой ловушки сценария может содержать символ %.

Добавить комментарий

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