PhpStorm получает поддержку Bower
Эта заметка является вольным переводом достаточно старой записи из блога PhpStorm с незначительными дополнениями.
Установка Bower для начинающего веб-разработчика дело весьма хлопотное. Причиной этому служат хитрые зависимости технологий лежащих в его основе. Вероятно, именно из-за этого милая птичка на лого ниже имеет такой неформальный окрас.
Хороший разработчик — ленивый разработчик, не так ли? Благодаря PhpStorm и WebStorm на основе платформы IntelliJ IDEA, тебе доступна более удобная работа с интегрированной поддержкой Bower. Bower — это пакетный менеджер для веб-сайтов, который позволяет тебе управлять front-end зависимостями проекта, такими как: Bootstrap, AngularJS, JQuery и многими другими. Давай посмотрим, как его можно использовать в PhpStorm.*
Для использования Bower в своём проекте сначала выполни следующие действия:
Установить NodeJS довольно просто, достаточно следовать инструкциям, расположенным на официальном сайте платформы. Далее следует установить плагин NodeJS для PhpStorm. Это можно сделать с помощью главного меню IDE [File → Settings... → Plugins], затем в указанном разделе нужно нажать на кнопку Install JetBrains plugin... и выбрать NodeJS.
Далее, ты можешь установить Bower, выполнив команду в терминале:
NPM — это пакетный менеджер, созданный для NodeJS. С его помощью можно управлять модулями и зависимостями для этой платформы. Поставляется вместе с NodeJS.
Другой способ установки — использовать главное меню PhpStorm [File → Settings... → Languages & Frameworks → Node.js and NPM] и затем секцию Packages (пакеты) выбранного раздела.
Далее в окне Available Packages (доступные пакеты) в поле поиска введи название необходимого пакета, в данном случае это bower. Затем включи чекбокс Options (опции) и добавь флаг -g, чтобы установить пакет в глобальном режиме.
Нажатие на кнопку Install Package (установить пакет) скачает и установит Bower. После установки, Bower появится в списке установленных пакетов для NodeJS.
Зависимости проекта для Bower указываются в файле-манифесте bower.json. Один из способов его создания использовать главное меню IDE [View → Tool Windows → Terminal] для открытия терминала, в котором можно сгенерировать файл-манифест, введя следующую команду:
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 (зависимости) для их удаления или добавления.
Конечно, также ты можешь использовать окно инструмента Terminal для работы с Bower из командной строки.
Например, следующая команда установит все зависимости, указанные в bower.json:
А такая команда покажет список всех установленных пакетов и их зависимости:
Интегрированная поддержка Bower в PhpStorm работает, начиная с версии 8 EAP. Все действия, описанные здесь, были воспроизведены с корректными ожидаемыми результатами на PhpStorm 2016.1.2.