Непрерывная интеграция с Angular CLI — мощным инструментом для создания приложений

Непрерывная интеграция с Angular CLI — мощным инструментом для создания приложений

От автора: 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

version: 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

Автор: Nicolas Charpentier

Источник: https://hackernoon.com/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Angular 4 с Нуля до Профи

Angular 4 - полное руководство для современной веб-разработки

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree