Автоматизуємо розробку на 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. Наше додаток схудла до 130КБ. Коли ви будуєте додаток з ключем -prod, Angular CLI виконує Ahead-Of-Time (AoT) компіляцію і не пакує сам компілятор разом з додатком. Без AoT компілятор вантажиться в броузер і на місці компілює Ангуляровские примочки чистий JavaScript.

Якщо чесно, AoT зменшує розмір тільки невеликих додатків. Але пре-компіляція все одно дуже корисна, оскільки швидкість рендеринга істотно зростає через непотрібність компіляції в броузері.

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

ng build –prod

Збірка готова. Тепер скопіюйте вміст директорії dist туди, де знаходиться ваш веб-сервер Apache, NGINX, Tomcat або будь-який інший. Процес складання і деплоймента можна і потрібно автоматизувати за допомогою таких тулзов, як 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:

Опубліковано: 13/02/17 @ 11:07
Розділ Блоги

SEO Блог

Автоматизуємо розробку на Angular з допомогою Angular CLI

Рекомендуємо: