Меню Рубрики

Установка bower mac os

#1 — Bower — подробное руководство

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

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

Всем привет! Меня зовут Дмитрий Ковальчук и я представляю вам первый урок в курсе «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

источник

Установка bower mac os

Bower — A package manager for the web

..psst! While Bower is maintained, we recommend yarn and webpack or parcel for new front-end projects!

Bower offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat.

Bower runs over Git, and is package-agnostic. A packaged component can be made up of any type of asset, and use any type of transport (e.g., AMD, CommonJS, etc.).

View complete docs on bower.io

Bower depends on Node.js and npm. Also make sure that git is installed as some bower packages require it to be fetched and installed.

See complete command line reference at bower.io/docs/api/

Installing packages and dependencies

We discourage using bower components statically for performance and security reasons (if component has an upload.php file that is not ignored, that can be easily exploited to do malicious stuff).

The best approach is to process components installed by bower with build tool (like Grunt or gulp), and serve them concatenated or using a module loader (like RequireJS).

To uninstall a locally installed package:

On prezto or oh-my-zsh , do not forget to alias bower=’noglob bower’ or bower install jquery\#1.9.1

Never run Bower with sudo

Bower is a user command; there is no need to execute it with superuser permissions.

To use Bower on Windows, you must install Git for Windows correctly. Be sure to check the options shown below:

Note that if you use TortoiseGit and if Bower keeps asking for your SSH password, you should add the following environment variable: GIT_SSH — C:\Program Files\TortoiseGit\bin\TortoisePlink.exe . Adjust the TortoisePlink path if needed.

To use Bower on Ubuntu, you might need to link nodejs executable to node :

Bower can be configured using JSON in a .bowerrc file. Read over available options at bower.io/docs/config.

We welcome contributions of all kinds from anyone. Please take a moment to review the guidelines for contributing.

Note that on Windows for tests to pass you need to configure Git before cloning:

Support us with a monthly donation and help us continue our activities. [Become a backer]

Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]

Copyright (c) 2012-present Twitter and other contributors

источник

Зачем нужен менеджер пакетов, или почему именно 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:

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

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

Ты можешь спокойно удалять папку 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 уже не поставит, потому что он не соответствует формуле

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

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

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

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

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

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

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

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

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

источник

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

Adblock
detector