Автоматизируем разработку на Angular с помощью Angular CLI

Полгода назад я начал рассказывать о веб-фреймворке Angular 2, который Google выпустил в сентябре 2016. В марте 2017 Angular 2 будет переименован в просто Angular и изменится методика нумерации новых релизов. Так, например, мартовская версия выйдет под номером 4.0.0, сентябрьская — 5.0.0 и т.д. Однако все новые версии будут базироваться на Angular 2, так что нет оснований для беспокойства.

Изначально многих JavaScript разработчиков пугала сложность и обилие конфигурационных файлов и тулзов требуемых для того, чтобы начать и задеплоить даже простое приложение. Нужно было изучить язык TypeScript (можно и без него, если скорость разработки вас не волнует), разобраться с настройками компилятора TypeScript, понять, как работать с модулями EcmaScript 6, выбрать загрузчик модулей (SystemJS или Webpack), сконфигурировать тесты, npm, веб-сервер. Добавьить скрипты и тулзы для оптимизации и деплоймента готового приложения, и появляется желание послать это все подальше и вернуться к простенькому, но миленькому jQuery.

Однако в Google тоже не дураки сидят, и был придуман Angular CLI, специальный тул, запускаемый из командной строки, который автоматизирует все стадии создания приложения, начиная с авто-генерации стартового проекта и конфигурационных файлов для деплоймента (дев и прод) и тестирования. Под капотом Angular CLI использует мощный упаковщик модулей Webpack, который популярен среди JavaScript разработчиков.

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

Для начала, установите NodeJS. И для Angular, и для Angular CLI нужно много дополнительных библиотек (packages), которые находятся в репозитории NPM по адресу www.npmjs.com (для джавистов скажу, что это аналог Maven Central). NodeJS идет с менеджером пакетов npm, который умеет устанавливать необходимые пакеты (зависимости вашего проекта) либо индивидуально, либо согласно конфигурационного файла package.json (для джавистов — аналог pom.xml).

После установки NodeJS вы сможете начать пользоваться npm с командной строки, чтобы установить и сам Angular CLI, и все необходимые зависимости для вашего проекта. Команда установки Angular CLI глобально для всех проектов выглядит так (-g значит установить глобально):

npm install @angular/cli -g

Angular CLI — это огромная горилла, и его установка займет пару минут, но после установки вы сможете пользоваться командой ng, чтобы генерировать различные ангуляровкие артифакты: новый проект, компоненты, сервисы и т.д. Кроме того, вы сможете делать билды и запускать проект с помощью веб-сервера webpack-dev-server, который будет установлен в вашем проекте.

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

ng new myproject

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

Время установки зависимостей можно существенно сократить, заменив npm более быстрым менеджером пакетом Yarn. Я написал, как это сделать в этом блоге.

Зайдите в директорию только что сгенерированного проекта, и вы увидите вот такую структуру:

Figure 1. Структура проекта

Чтобы собрать дев-версию этого проекта выполните следующую команду:

ng serve

Теперь откройте броузер по адресу http://localhost:4200, и вы увидите вот такую страничку, которая рендерится компонентом верхнего уровня app.component.ts:

Figure 2. Запускаем приложение

У Angular CLI есть много других команд, о которых можно прочесть в документации. А сейчас я просто покажу вам пару способов сборки приложения.

Команда ng serve запустила сервер webpack-dev-server, который стартовал Webpack, который в свою очередь взял все файлы из нашего проекта и собрал их в пакет в оперативной памяти. Размер это приложения не был оптимизирован, потому что мы работаем в режиме разработки. Откройте вкладку Network в Dev Tools вашего броузера, и вы увидите, что размер этого крошечного приложения около трех мегабайт. Давайте уменьшим этот размер, заказав оптимизированную сборку для продакшн:

ng serve –prod

Освежите страничку localhost:4200. Наше приложение похудело до 130KB. Когда вы строите приложение с ключом -prod, Angular CLI выполняет Ahead-Of-Time (AoT) компиляцию и не пакует сам компилятор вместе с приложением. Без AoT компилятор грузится в броузер и на месте компилирует Aнгуляровские примочки в чистый JavaScript.

Если честно, AoT уменьшает размер только небольших приложений. Но пре-компиляция все равно очень полезна, т.к. скорость рендеринга существенно возрастает из-за ненужности компиляции в броузере.

Команда ng serve упаковывает (creates bundles) приложение в оперативной памяти и автоматически перестраивает пакет, как только разработчик вносит изменения в коd приложения. Это хорошо, но для продакшн сборки и деплоймента нужны реальные файлы. Для этого есть другая команда: ng build. Эта команда создает директорию dist и записывает туда собранные файлы (и их gzip-версии) готовые для деплоймента. Туда также идут стили, картинки, шрифты и другие ресурсы необходимые для вашего приложения. Выполните вот такую команду:

ng build –prod

Сборка готова. Теперь скопируйте содержимое директории dist туда, где находится ваш веб-сервер Apache, NGINX, Tomcat или любой другой. Процесс сборки и деплоймента можнo и нужно автоматизировать с помощью таких тулзов, как npm scripts, Gulp, Grunt и т.п.

В этой статье я показал пример генерации и сборки очень простого Angular приложения с помощью Angular CLI. Если вы планируете программировать с Angular, сначала познакомьтесь с языком TypeScript, который поддерживает классы, интерфейсы, аннотации, генерики, а главное, типы данных. Если вы уже знаете JavaScript — это хорошо. А если нет, учите сразу TypeScript. Friends don’t teach friends JavaScript. They teach TypeScript.

В интернете есть много ресурсов для изучения Angular. Вышло несколько книг, включая и нашу «Angular 2 Development with TypeScript». В конце февраля я и мой соавтор Антон будем проводить онлайн тренинг по выходным, а в мае я планирую приехать в Киев и провести трехдневный тренинг вживую.

Я записал видео, которое показывает, как сгенерировать и задеплоить проект с помощью Angular CLI: