Від автора: Angular CLI – потужний інструмент підтримки і створення додатків на Angular. Він не тільки надає масштабовану структуру проекту, але також обробляє всі загальні нудні завдання прямо з коробки. Плюс, він буде кращим практикам Angular.
Збирайте і випробуйте свої додатки моментально
За завданням є загальні команди:
ng new – ініціалізує новий проект Angular з безліччю налаштувань;
ng generate – генерує що-небудь з шаблону;
ng serve – збирає додаток і запускає веб-сервер;
ng build – компілює програму в папку;
ng test – запускає юніт тести з допомогою Karma – вбудованого тест пригодам;
ng lint – линтит коду програми за допомогою tslint, щоб дотримуватися кращі практики Angular.
З допомогою цих команд можна з легкістю створити новий додаток Angular, генерувати компоненти з шаблонів, а також збирати їх за кілька хвилин. Ви можете перевіряти проект на функціонування за допомогою тест раннери, а якщо ви все ще поважаєте стиль і кращі практики Angular, то можна задіяти і лінтер. Ніяких налаштувань виконувати не потрібно, все вже готове до запуску тестів. Ці інструменти будуть ефективні тільки при запуску команд.
Безперервна інтеграція
Щоб максимально розкрити потенціал інструменту, ми можемо автоматично виконувати ці команди в інструменті безперервної інтеграції типу CircleCI, Travis, AppVeyor, Jenkins, Bamboo і т. д., які підключені до системи контролю вихідних у кожному коммите, пулл реквесте. Інструментарій навіть запобігає мерж реквест, якщо команди не здійснилися. Тобто інструмент заборонить чий-небудь мерж реквест, якщо його код не збігається з вашим стилем або стилем Angular і може поламати проект. Ви, швидше за все, вже чули таке «але у мене на комп’ютері все працює» — саме це ми і хочемо запобігти.
Вам лише потрібно встановити оточення і виконати попередні команди.
По-перше, давайте зберемо angular-додаток в про-дуктів і aot, щоб перевірити, що все нормально. Потім протестуємо його і проведемо линтинг. Це можна робити в безлічі інструментів, але давайте зробимо це в моїх улюблених.
Ми будемо використовувати Yarn – швидкий і безпечний пакетний менеджер для кешування наших залежностей між билдами.
CircleCI 2.0
версія: 2
jobs:
build:
working_directory: ~/app-name
docker:
– image: circleci/node:6-browsers
steps:
– checkout
– restore_cache:
key: dependency-cache-{{ checksum “yarn.lock” }}
– run:
name: install-dependencies
command: yarn install
– save_cache:
key: dependency-cache-{{ checksum “yarn.lock” }}
paths:
– ~/.cache/yarn
– ./node_modules
– run:
name: angular-build
command: yarn ng — build –prod –aot –no-progress
– run:
name: angular-test
command: yarn test — –single-run –no-progress
– run:
name: angular-lint
command: yarn lint
AppVeyor
image: Visual Studio 2017
environment:
nodejs_version: “6”
platform:
– x64
install:
– ps: Install-Product node $env:nodejs_version
– yarn install –no-progress
test_script:
– yarn ng — build –prod –aot –no-progress
– yarn test — –single-run –no-progress
– yarn lint
build: off
cache:
– node_modules -> yarn.lock
– “%LOCALAPPDATA%/Yarn”
Більш детально дивіться в репозиторії, який використовувався в цій статті: charpeni/angular-cli-circleci
