6 кращих практик та порад щодо використання Angular CLI

Майбутнє зараз ( автор Себастьєн Джермер)
Відмова: Стаття зосереджена на кутовій версії CLI менше 6.0.0, яка була випущена у квітні 2018 року, все майже все ще діє, єдине, що змінилося, - це прапори за замовчуванням збірки prod, будь ласка, подивіться на офіційний Angular CLI ng build документація.
Підпишіться на реліз Butler, твіт-бот, який я створив, щоб допомогти вам бути в курсі випусків Angular CLI, Angular та багатьох популярних бібліотек інтерфейсу ...

Розробка програм Angular CLI - це дуже приємне враження! Кутова команда надала нам дивовижний CLI, який підтримує більшість речей, необхідних для будь-якого серйозного проекту поза рамками.

Стандартизована структура проекту з усіма можливостями тестування (тестування блоків та e2e), риштування коду, побудова виробничого класу з підтримкою використання конфігурації середовища. Це реальна мрія та багато заощаджених годин на кожному новому проекті. Дякую команді Angular!

У той час як Angular CLI відмінно працює з ходу, є деякі потенційні поліпшення конфігурації та найкращі практики, які ми можемо використовувати, щоб зробити наші проекти ще кращими!

Що ми будемо вчитися

  1. Найкращі практики архітектури за допомогою функціональних модулів Core, Shared та lezy-load
  2. Використання псевдонімів для папок додатків та середовищ для підтримки більш чистого імпорту
  3. Чому і як використовувати матеріал Sass та Angular
  4. Як налаштувати гарне нарощування виробництва
  5. Як махнути PhantomJS до побачення та використовувати замість нього Headless Chrome (тестування)
  6. Як випустити наш проект з автоматично сформованим журналом змін та правильним відхиленням версій

1. Трохи архітектури

Гаразд, ми створили наш новий свіжий проект, використовуючи Angular CLI, але що тепер? Чи варто просто продовжувати генерувати наші сервіси та компоненти в деякі випадкові папки. Як ми структуруємо наш проект?

Хороше керівництво, яке слід дотримуватися, - це розділити наше додаток на щонайменше три різні модулі - Core, Shared та Feature (нам, мабуть, знадобиться більше ніж один функціональний модуль).

CoreModule

Тут повинні бути реалізовані всі сервіси, які повинні мати один і лише один екземпляр на додаток (послуги однотонних). Типовим прикладом може бути служба аутентифікації або обслуговування користувачів. Давайте розглянемо приклад реалізації CoreModule.

SharedModule

Тут повинні бути реалізовані всі «німі» компоненти та труби. Ці компоненти не імпортують та не вводять послуги з основних або інших функцій у своїх конструкторах. Вони повинні отримувати всі дані, хоча атрибути в шаблоні компонента, що використовує їх. Це все підсумовує той факт, що SharedModule не має ніякої залежності від решти нашої програми.

Це також ідеальне місце для імпорту та реекспортування деталей кутового матеріалу.

Як підготувати структуру проекту за допомогою Angular CLI

Ми можемо генерувати основні та спільні модулі відразу після створення нашого нового проекту. Таким чином, ми будемо готові до генерації додаткових компонентів та сервісів з самого початку.

Запустіть генерувати ядро ​​модуля. Потім створіть файл index.ts у папці core та повторно експортуйте сам CoreModule. Ми будемо реекспортувати додаткові державні послуги, які повинні бути доступні у всій програмі під час подальшого розвитку.

Зробивши це, ми можемо зробити те ж саме для спільного модуля.

FeatureModule

Ми створимо кілька функціональних модулів для кожної незалежної функції нашої програми. Модулі функцій повинні імпортувати лише сервіси з CoreModule. Якщо функціональному модулю A потрібно імпортувати послугу з функціонального модуля B, розгляньте можливість переміщення цієї послуги в основну.

У деяких випадках є потреба в службах, якими поділяються лише деякі функції, і не має сенсу переносити їх у основні. У цьому випадку ми можемо створити спеціальні модулі спільних функцій, як описано далі у цій публікації.
Правилом є намагання створити функції, які не залежать від будь-яких інших функцій, лише від служб, що надаються CoreModule, та компонентів, що надаються SharedModule.

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

LazyLoading

Ми повинні ліниво завантажувати наші функціональні модулі, коли це можливо. Теоретично лише один функціональний модуль повинен завантажуватися синхронно під час запуску програми, щоб показати початковий вміст. Кожен інший функціональний модуль повинен ліниво завантажуватися після запущеної користувачем навігації.

2. Псевдоніми для додатків та середовищ

Здавання папок додатків та середовищ дозволить нам реалізовувати чистий імпорт, який буде узгоджений протягом усієї програми.

Розглянемо гіпотетичну, але звичну ситуацію. Ми працюємо над компонентом, який розміщений у трьох папках глибоко у функції A, і ми хочемо імпортувати службу з ядра, яке розташоване на дві папки вглиб. Це призведе до того, що заявка про імпорт виглядає приблизно як імпорт {SomeService} з '../../../core/subpackage1/subpackage2/some.service'.

Однозначно не найчистіший імпорт коли-небудь ...

І що ще гірше, що коли ми хочемо змінити розташування будь-якого з цих двох файлів, наша заява на імпорт порушиться. Порівняйте це зі значно коротшим імпортом {SomeService} з "@ app / core". Виглядає краще, чи не так?

Щоб мати можливість використовувати псевдоніми, ми повинні додати властивості baseUrl та paths до нашого файлу tsconfig.json, як це…

Ми також додаємо псевдонім @env, щоб мати можливість легко отримувати доступ до змінних оточуючих середовищ з будь-якої точки нашого додатку, використовуючи те саме імпорт {середовище} з заяви @ @ env / environment. Він буде працювати для всіх заданих середовищ, оскільки автоматично вирішить правильний файл середовища на основі прапора --env, переданого команді ng build.

З нашими шляхами ми можемо імпортувати такі середовища та послуги, як цей…

Можливо, ви помітили, що ми імпортуємо об'єкти (наприклад, SomeSingletonService у наведеному вище прикладі) безпосередньо з @ app / core замість @ app / core / some-package / some-singleton.service. Це можливо завдяки реекспортуванню кожного державного суб'єкта в основний файл index.ts. Ми створюємо один файл index.ts на пакет (папку), і вони виглядають приблизно так ...

У більшості додатків компоненти та сервіси конкретного функціонального модуля, як правило, повинні мати доступ лише до сервісів з CoreModule та компонентів з SharedModule. Іноді цього може бути недостатньо для вирішення конкретного ділового випадку, і нам також знадобиться якийсь "модуль спільної функції", який забезпечує функціональність для обмеженого набору інших модулів функцій.

У цьому випадку ми закінчимо щось на зразок імпорту {SomeService} з "@ app / shared-feature"; Точно так само, як до основного, доступ до спільної функції також можна отримати за допомогою псевдоніма @app.

Залежно від модуля залежать структура дерева, яка дуже схожа на добре відоме дерево компонентів

3. Використання Sass

Sass - це препроцесор стилів, який пропонує підтримку фантазійних речей, таких як змінні (навіть незважаючи на те, що css також незабаром отримає змінні), функцій, комбінацій ...

Sass також необхідний для ефективного використання офіційної бібліотеки компонентів Angular Material Components з її широкими можливостями тематизації. Можна припустити, що використання Sass - це вибір за замовчуванням для більшості проектів.

Для використання Sass ми повинні генерувати наш проект, використовуючи нову команду Angular CLI з прапором --style scss. Це встановлює більшу частину необхідної конфігурації. Одне, що не додано за замовчуванням, це stylePreprocessorOptions з includePaths, і ми можемо встановити його самостійно із обов'язковими корінними значеннями "./" та необов'язково "./themes".

Це допомагає нашому редактору знаходити імпортовані символи та покращує досвід розробників із заповненням коду змінних Angular Material та корисних функцій.

Під час тематизації програм «Кутовий матеріал» є хорошою практикою вилучення визначень тем у окремі папки тем, по одній темі на файл.
Слідкуйте за мною у Twitter, щоб отримувати сповіщення про найновіші публікації блогу та цікаві матеріали із фронтену

4. Побудова "PROD"

Проект, згенерований Angular CLI, поставляється лише з дуже простим сценарієм збірки ng. Щоб створити артефакти виробничого класу, ми самі повинні зробити трохи налаштування.

Ми додаємо "build: prod": "ng build - цільове виробництво --build-optimizer - vendor-chunk" до наших скриптів package.json.

Цільове виробництво

Це прапор парасольки, який дозволяє мінімізувати код і багато корисних прапорів збірки за замовчуванням. Це еквівалентно використанню наступних…

  • --environment prod —використовуйте файл Environment.prod.ts для змінних середовища
  • --aot - увімкнення попередньої компіляції. Це стане налаштуванням за замовчуванням у майбутніх версіях Angular CLI, але поки що це потрібно ввімкнути вручну
  • --output-hashing all - хеш-вміст згенерованих файлів та додавання хешу до імені файлу, щоб полегшити завантаження кешу браузера (будь-яка зміна вмісту файлу призведе до різного хешу, і тому браузер змушений завантажити нову версію файлу)
  • --extract-css true - витягнути весь CSS в окремий файл аркуша стилів
  • --sourcemaps false - відключення генерації вихідних карт
  • --named-chunks false - відключити використання людських читаних імен для блоку та використовувати замість них числа

Інші корисні прапори

  • - build-optimizer - нова функція, яка призводить до менших пакетів, але набагато довших термінів збирання, тому використовуйте з обережністю! (також має бути включено за замовчуванням у майбутньому)
  • --vendor-chunk - витягнути весь код постачальника (бібліотеки) в окремий фрагмент

Також перевірте офіційні документи щодо інших доступних прапорів конфігурації, які можуть бути корисні у вашому індивідуальному проекті.

5. Phantom JS мертвий! Хай живе безголовий хром!

PhantomJS - це дуже відомий безголовий браузер, який дефоктовано РІШЕННЯ для запуску тестів на передній панелі на серверах CI та багатьох розробниках.

Незважаючи на те, що добре, підтримка сучасних функцій ECMAScript відставала. Тим більше, що нестандартна поведінка багато разів спричиняла головний біль, коли тести проходили локально без проблем, але вони все-таки порушували середовище ІС.

На щастя, нам з цим більше не доводиться стикатися!

Хром без голови - Frontend тестування Ренесансу розпочалося!

Як говориться в офіційній документації ...

Хром без голови постачається в Chrome 59. Це спосіб запустити браузер Chrome у безголових умовах. По суті, працює Chrome без хрому! Він приносить усі функції сучасної веб-платформи, що надаються Chromium та двигуном візуалізації Blink у командному рядку.
Чудово! Тож як ми можемо використовувати його в нашому проекті CLUL CLI?

Ми додаємо прапор --browser ChromeHeadless до нашої тестової команди, тому ми закінчуємо з "test": "ng test --browser ChromeHeadless --single-run" та "watch": "ng test --browser ChromeHeadless" у нашому пакеті. сценарії json. Досить просто, га!

6. Використовуйте стандартизовані повідомлення про фіксацію та автоматичний генератор змін

Завжди здорово зробити короткий огляд нових можливостей та виправлень помилок проекту, який нас цікавить.

Надамо нашим користувачам таку ж зручність!

Написання журналу змін вручну було б надзвичайно виснажливим завданням, схильним до помилок, тому найкраще автоматизувати цей процес замість цього. Є багато доступних інструментів, які можуть виконати цю роботу, але зосередимось на стандартній версії.

Цей інструмент автоматично генерує та оновлює файл CHANGELOG.md з усіма зобов’язаннями, що відповідають специфікації Conventional Commits і правильно визначає нову версію нашого проекту.

Звичайна фіксація визначає обов'язковий тип, необов’язковий (область): після цього слід виконувати повідомлення про фіксацію. Можна також додати необов'язкове тіло та колонтитул, обидва розділені порожнім рядком. Давайте подивимось, як це виглядає на практиці, перевіривши приклад повідомлення про повну фіксацію бібліотеки ngx-моделей.

fix (залежність): кілька версій rxjs в одному проекті (TS90010)
BREAKING CHANGE: rxjs тепер є peerDependency замість залежності
закривається №1

Стандартна версія буде правильно підганяти ОСНОВНУ версію проекту через наявність ключового слова BREAKING CHANGE в органі комісії.

Згенерований CHANGELOG.md буде виглядати приблизно так ...

Приклад файлу CHANGELOG.md, створеного бібліотекою стандартної версії

Виглядає солодко! То як ми можемо використовувати це у нашому проекті?

Ми починаємо з встановлення npm install -D стандартної версії, щоб зберегти її в наших devDependitions і додати "release": "standard-version" до наших script.json сценаріїв.

Ми також можемо додати git push та npm публікацію для автоматизації всього процесу. У цьому випадку ми закінчимо "release": "стандартна версія && git push - follow-tags origin master && npm published".

Зауважте, що ми використовували && для ланцюга наших команд, що залежить від платформи і працює лише на системах на базі Unix (так само і в Windows з Cygwin, Gitbash або новою підсистемою Win10 для Linux).

БОНУС: Використовуйте ресурсний корінь (Intellij IDEA, лише веб-шторм)

Intellij IDEA не завжди знайде всі шляхи за замовчуванням, що призведе до безлічі червоних позначок помилок і підтримка заповнення коду. На щастя, рішення дуже просте. Просто виберіть папку src і позначте її як джерело кореня.

Позначте папку src як джерело Root

Чудово! Ви зробили це до кінця!

Сподіваюся, ви знайшли корисні деякі поради та найкращі практики! Будь ласка, підтримайте цю статтю своїм , щоб поширити ці поради для широкої аудиторії!

Розпочати проект Angular? Ознайомтеся з кутовим стартером NgRx Material!
Кутовий стартер NgRx з вбудованими передовими методами, тематизацією та багато іншого!

Крім того, не соромтеся перевірити деякі інші цікаві публікації з кутових…

І ніколи не забувай, майбутнє світле
Очевидно світле майбутнє (S Свен Шеермайер)