От автора: 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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
Источник: //hackernoon.com/
Редакция: Команда webformyself.
