PhpStorm получает поддержку Bower

Последнее обновление: 20.01.2019 г.
Публикация: 22.10.2016 г.
Информация

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


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

Bower: Логотип менеджера пакетов

Хороший разработчик — ленивый разработчик, не так ли? Благодаря PhpStorm и WebStorm на основе платформы IntelliJ IDEA, тебе доступна более удобная работа с интегрированной поддержкой Bower. Bower — это пакетный менеджер для веб-сайтов, который позволяет тебе управлять front-end зависимостями проекта, такими как: Bootstrap, AngularJS, JQuery и многими другими. Давай посмотрим, как его можно использовать в PhpStorm.

Для использования Bower в своём проекте сначала выполни следующие действия:

  1. Установи GIT.
  2. Установи NodeJS и NPM.
  3. Установи плагин NodeJS для PhpStorm.
  4. Установи Bower.

Установить NodeJS довольно просто, достаточно следовать инструкциям, расположенным на официальном сайте платформы. Далее следует установить плагин NodeJS для PhpStorm. Это можно сделать с помощью главного меню IDE [File → Settings... → Plugins], затем в указанном разделе нужно нажать на кнопку Install JetBrains plugin... и выбрать NodeJS.

Далее, ты можешь установить Bower, выполнив команду в терминале:

npm install -g bower
Заметка

NPM — это пакетный менеджер, созданный для NodeJS. С его помощью можно управлять модулями и зависимостями для этой платформы. Поставляется вместе с NodeJS.

Другой способ установки — использовать главное меню PhpStorm [File → Settings... → Languages & Frameworks → Node.js and NPM] и затем секцию Packages (пакеты) выбранного раздела.

PhpStorm: Раздел Node.js and NPM

Далее в окне Available Packages (доступные пакеты) в поле поиска введи название необходимого пакета, в данном случае это bower. Затем включи чекбокс Options (опции) и добавь флаг -g, чтобы установить пакет в глобальном режиме.

PhpStorm: Установка NPM пакетов

Нажатие на кнопку Install Package (установить пакет) скачает и установит Bower. После установки, Bower появится в списке установленных пакетов для NodeJS.

Зависимости проекта для Bower указываются в файле-манифесте bower.json. Один из способов его создания использовать главное меню IDE [View → Tool Windows → Terminal] для открытия терминала, в котором можно сгенерировать файл-манифест, введя следующую команду:

bower init

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

? name [Enter]
? version [Enter]
? description [Enter]
? main file [Enter]
? keywords [Enter]
? authors [Enter]
? license [Enter]
? homepage [Enter]
? set currently installed components as dependencies? [n][Enter]
? add commonly ignored files to ignore list? [n][Enter]
? would you like to mark this package as private which prevents it
  from being accidentally published to the registry? [y][Enter]
Заметка

На предпоследний вопрос (строка 11 и 12 выше) следует ответить утвердительно — это предотвратит случайную регистрацию данного пакета в реестре Bower.


В результате будет сгенерирован следующий json объект:

{
  "name": "example.lc",
  "description": "",
  "main": "",
  "license": "MIT",
  "homepage": "",
  "private": true
}

Утвердительный ответ на последний вопрос создаст файл-манифест с указанным выше содержанием:

? Looks good? [y][Enter]

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

Для работы с зависимостями Bower в PhpStorm, выбери [File → Settings... → Languages & Frameworks → JavaScript → Bower], а затем используй секцию Dependencies (зависимости) для их удаления или добавления.

PhpStorm: Раздел BowerPhpStorm: Установка Bower пакетов

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

Например, следующая команда установит все зависимости, указанные в bower.json:

bower install

А такая команда покажет список всех установленных пакетов и их зависимости:

bower list
PhpStorm: Список всех установленных пакетов Bower

Интегрированная поддержка Bower в PhpStorm работает, начиная с версии 8 EAP. Все действия, описанные здесь, были воспроизведены с корректными ожидаемыми результатами на PhpStorm 2016.1.2.

Контрольные вопросы

Источники