Содержание


Ускорение включения зависимостей в гибридные приложения платформы IBM MobileFirst Platform с помощью инструментов Bower и wiredep

Comments

Чем полезны инструменты Bower и wiredep?

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

  • Различные версии зависимостей у членов группы разработки
  • Издержки на управление загрузкой и выгрузкой зависимостей
  • Трудность согласованного определения местоположения зависимостей в дереве исходных кодов
  • Трудность согласованной загрузки зависимостей в приложение
  • Чрезмерное потребление пространства приложением в системах управления исходным кодом
  • Чрезмерная сложность процессов непрерывной интеграции

Инструменты Bower и wiredep помогают решить эти проблемы.

  • Инструмент Bower облегчает специфицирование, загрузку и управление для версий/файлов зависимостей; он также позволяет удалять файлы зависимостей систем управления исходным кодом.
  • Инструмент wiredep дополняет Bower, гарантируя единообразную загрузку зависимостей, установленных средствами Bower.

Предварительные условия

  • У вас должны быть установлены инструменты командной строки для платформы IBM MobileFirst Platform. Вы будете использовать эти инструменты для создания проектов, приложений и сред.
  • В качестве альтернативного варианта вы можете по-прежнему использовать инструмент IBM MobileFirst Platform Studio. Загрузите редакцию для разработчиков IBM MobileFirst Platform Studio Developer Edition.
  • Вы должны обладать базовыми навыками по применению платформы IBM MobileFirst Platform для создания гибридных приложений.
  • Инструменты, используемые в этом учебном пособии, базируются на последней версии инфраструктуры Node.js, которую можно загрузить с сайта nodejs.org. Чтобы убедиться в правильности установки инфраструктуры Node.js, откройте терминал и введите команду node -v. Если инфраструктура установлена правильно, вы увидите номер версии, например, v0.10.33.

Установка инструментов

Инфраструктура Node.js основана на использовании командной строки. Откройте терминал и введите следующую команду, чтобы применить инструмент Node Package Manager (NPM) для глобальной установки необходимых пакетов Node.js.

npm install –g wiredep bower

Начало работы

Создайте новый проект MobileFirst Platform с именем ToolsProject и гибридное приложение с именем AmazingApp. Добавьте к этому приложению среду Android.

 mfp create ToolsProject cd ToolsProject mfp add hybrid AmazingApp cd apps/AmazingApp

Начиная с этого момента выполняйте все команды в каталоге ToolsProject/apps/AmazingApp.

Инициализация проекта Node.js

Инициализируйте новый проект Node.js.

npm init

Следуйте появляющимся рекомендациям; рекомендуем принимать значения по умолчанию. Для вашего приложения будет создан новый файл package.json.

Инициализация проекта Bower

Инициализируйте новый проект Bower.

bower init

Следуйте появляющимся рекомендациям: как и при инициализации проекта Node.js, можно принимать значения по умолчанию. Для вашего приложения будет создан новый файл bower.json.

Сконфигурируйте инструмент Bower для работы со структурой MFP-проекта, создав файл с именем ToolsProject/apps/AmazingApp/.bowerrc со следующим содержимым.

 { "directory": "common/bower_components" }

Этот файл дает инструменту Bower указание устанавливать пакеты в каталоге common/bower_components.

Добавление пакетов Bower

Теперь к проекту можно добавить пакеты Bower, множество которых находится в свободном доступе. Большинство веб-инфраструктур можно получить из каталога Bower. В демонстрационных целях установите инфраструктуру bootstrap – это превосходная отправная точка для многих проектов.

bower install --save bootstrap

После запуска этой команды на исполнение вы увидите, что был установлен дополнительный пакет с именем jQuery, от которого зависит bootstrap. Инструмент Bower пытается разрешать зависимости автоматически и при возникновении конфликтов предлагает вам устранить ихего. В отличие от инструмента NPM, инструмент Bower устанавливает все пакеты как одноуровневые элементы в каталоге bower_components. Такой подход может увеличить вероятность конфликтов, однако сокращает количество установленных пакетов.

Автоматическая вставка тегов для CSS и JS в HTML-файл

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

Дополнение файла index.html

Отредактируйте файл common/index.html и добавьте в него заполнители, которые будет использовать инструмент wiredep, как показано ниже.

 <html> <head> <!-- прежний контент <head> --> <!-- Новые строки для поддержки wiredep --> <!-- bower:css --> <!-- endbower --> </head> <body> <!-- прежний контент <body> --> <!-- Новые строки для поддержки wiredep --> <!-- bower:js --> <!-- endbower --> </body> </html>

Исполнение инструмента wiredep в ручном режиме

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

 wiredep --verbose --bowerJson bower.json --src common/index.html

Открыв файл common/index.html, вы увидите, что инструмент wiredep вставил HTML-теги для загрузки ресурсов JS и CSS, представленных пакетами Bower.

Создание script-записи для инструмента NPM

Приведенная выше команда слишком сложна для запоминания, поэтому создайте ее сокращенную запись для последующего использования. Отредактируйте файл package.json и дополните его script-записью, как показано ниже.

 { "scripts": { "wiredep": "wiredep --verbose --bowerJson bower.json --src common/index.html" } }

Начиная с этого момента для запуска инструмента wiredep на исполнение достаточно ввести команду npm run wiredep.

Автоматическое исполнение инструмента wiredep

Инструмент Bower можно сконфигурировать на автоматический запуск инструмента wiredep при установке пакета. Отредактируйте ранее созданный файл .bowerrc, дополнив его script-записью postinstall, как показано ниже.

 { "scripts": { "postinstall": "wiredep --verbose --bowerJson bower.json --src common/index.html" } }

Тестирование

Чтобы убедиться в том, что инструмент wiredep работает ожидаемым образом, удалите и снова добавьте зависимости Bower. Сначала удалите зависимости и обновите файл index.html.

 bower uninstall --save bootstrap npm run wiredep

Проверьте свой файл common/index.html и убедитесь, что теги для загрузки JS и CSS были удалены. Затем снова добавьте зависимость. Файл index.html будет автоматически обновлен Bower-скриптом postinstall.

bower install --save bootstrap

Проверьте свой файл common/index.html и убедитесь, что теги для загрузки JS и CSS снова были добавлены.

Заключение

В этом учебном пособии было показано, как использовать инструменты Bower и wiredep для управления зависимостями в гибридном веб-приложении на платформе IBM Mobile First Platform.


Ресурсы для скачивания


Похожие темы


Комментарии

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

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Мобильные приложения, WebSphere
ArticleID=1020312
ArticleTitle=Ускорение включения зависимостей в гибридные приложения платформы IBM MobileFirst Platform с помощью инструментов Bower и wiredep
publish-date=11092015