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

Постановка задачи

Современные веб-приложения включают в себя широкий спектр ресурсов, которые должны быть упакованы различными способами, чтобы обеспечить удобство работы для конечного пользователя. Благодаря минимизации исходного кода, динамическим загрузчикам модулей, компиляторам SASS и LESS, транспиляции CoffeeScript и управлению зависимостями процесс сборки и управление жизненным циклом приложения становятся все более сложными.

Управление зависимостями

Бауэр

В настоящее время существует несколько инструментов, которые предоставляют решение для управления зависимостями, аналогичное Maven в Java. Основным инструментом в этом пространстве является Бауэр. Bower используется многими другими фреймворками сборки, такими как начальная загрузка Twitter и Yeoman от Google. Bower использует простой файл манифеста, чтобы указать набор библиотек и их версий, которые требуются приложению. Bower использует GitHub для размещения библиотек, мало чем отличающихся от Maven с его центральным репозиторием.

Bower использует файл с именем bower.json в корневом каталоге проекта для указания зависимостей. Этот файл имеет простой формат, показанный ниже.

Образец конфигурации

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

Установка

Установка Bower зависит от Node Package Manager (npm). Установка node и npm выходит за рамки этой статьи, но мой другой технический документ по nodejs охватывает эту тему.

npm install -g bower

Все зависимости, необходимые для Bower, устанавливаются npm, а флаг -g сделает команду доступной для всех пользователей.

Общее использование

Bower устанавливается через npm (модуль Node Package) и предоставляет инструмент командной строки, который дает пользователю набор полезных операций.

  • bower install — установятся все пакеты, перечисленные в файле bower.json.
  • bower init — создает новый шаблонный файл bower.json для проекта
  • bower search — будет искать именованный пакет в общедоступном репозитории
  • bower update — обновляет все пакеты, установленные локально, до последних версий

Системы сборки

Грунт.js

Grunt.js описывается как средство запуска задач, которое может автоматизировать общие задачи сборки. Доступно множество плагинов, и сообщество довольно велико. Плагины варьируются от минимизации, jshinting, запуска тестов, компиляторов css до пользовательских плагинов, которые можно развернуть в облачных провайдерах.

Установка

npm install -g grunt-cli

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

Конфигурация

Grunt полагается на файл конфигурации на основе JavaScript (Gruntfile.js) для запуска набора задач. Как правило, все задачи имеют одинаковую форму и связаны друг с другом так же, как команды Ant или Gradle. Файл конфигурации показан ниже.

Представление командной строки

Команда Grunt очень похожа на Ant или Gradle в том смысле, что она в основном представляет любые задачи, присутствующие в файле конфигурации. Запуск команды без параметров запустит задачу по умолчанию; однако запуск команды с именем задачи приведет к запуску только этой команды и ее предшественников.

Gulp.js

Gulp.js — это система сборки, аналогичная Grunt. Это более новый фреймворк, и он имеет одно существенное отличие от Grunt. Gulp.js использует потоки Nodejs для всей своей системы сборки. Вместо того, чтобы использовать задачи как единицы работы, как это делает Grunt, Gulp использует технику потока для передачи одного набора файлов через конвейер задач. Лучше всего это можно проиллюстрировать, взглянув на конфигурационный файл gulp.

Установка

npm install -g gulp

Чтобы установить gulp в качестве зависимости разработчика для вашего приложения, выполните следующую команду в корневом каталоге вашего проекта.

npm install --save-dev gulp

Конфигурация

Основываясь на различных синтаксисах файлов, читатель может определить, какую систему он предпочитает. В настоящее время система Gulp.js имеет значительный вес с ее использованием потоков и общим направлением направления nodejs с его акцентом на потоки.

Системы строительных лесов

Йомен

Yeoman — это инструмент, созданный для автоматизации интерфейсных веб-процессов. Он включает инструменты, которые мы уже рассмотрели (Grunt и Bower), но добавляет новый инструмент под названием Yo. В центре внимания Yeoman — создание шаблона приложения на основе входных данных для его системы сборки. Это мало чем отличается от методологии приложений Ruby On Rails.

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

Платформа использует эти генераторы для формирования структуры приложения для пользователя. Выбрав несколько параметров, пользователь может создать хорошо документированное и хорошо структурированное интерфейсное веб-приложение. Некоторые из самых популярных генераторов включены для AngularJS, Backbone, Polymer, Ember и наборов тестов, таких как Karma и Jasmine.

Установка

npm install -g yo

Чтобы установить любой данный генератор Yeoman, выполните следующую команду.

// basic web app generator
npm install -g generator-webapp
// angular generator
npm install -g generator-angular

Типичное использование

Самый простой способ использовать Yeoman — создать шаблон для нового внешнего веб-приложения. Чтобы выполнить это действие, пользователь должен выполнить следующие команды.

На этом Yeoman завершен, и пользователю нужно только запустить Bower для установки зависимостей.

Вывод

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

Я считаю, что платформа Yeoman с ее генераторами также может быть очень полезна для Nielsen, поскольку инженеры могут создавать свой собственный набор генераторов, специфичных для нужд их приложений.