Рубрики
Uncategorized

Настройка базового CI

Фото Даниэля МакКаллоу о Unsplash Invelocment Этот пост проходит в серии A … Tagged с DevOps, Git, Gitlab, Angular.

Ng-shadow (4 серии деталей)

Фотография Даниэль МакКаллоу на Неспособный

Этот пост происходит в серии, направленной на то, чтобы показать, как построить угловое применение с нуля.

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

Этот пост покажет вам, как настроить базовый инструмент CI (тестирование и пробег вашего кода) для вашего приложения на Gitlab.

git checkout master
git pull
# Retrieve the last master version

git checkout -b develop
# Branch develop creation

Нам нужно будет адаптировать нашу среду тестирования для работы в среде Gitlab CI.

Добавьте линии Follwing в свой Package.json :

"scripts": {
    ...
    "ci:test": "ng test --browsers PhantomJS --watch=false",
    "ci:lint": "ng lint",
    ...
}

Добавить поддержку Phantomjs:

npm install karma-phantomjs-launcher phantomjs core-js --save --save-exact

Обновить karma.conf.js:

plugins: [
    ...,
    require('karma-phantomjs-launcher')
],

Обновить Polyfill.ts:

# Add core-js imports
import 'core-js/es/symbol';
import 'core-js/es/object';
import 'core-js/es/function';
import 'core-js/es/parse-int';
import 'core-js/es/parse-float';
import 'core-js/es/number';
import 'core-js/es/math';
import 'core-js/es/string';
import 'core-js/es/date';
import 'core-js/es/array';
import 'core-js/es/regexp';
import 'core-js/es/map';
import 'core-js/es/weak-map';
import 'core-js/es/set';

# Uncomment zone polyfills
(window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
(window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
(window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
(window as any).__Zone_enable_cross_context_check = true;

Обновите свой tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "es2019",
      "dom",
      "esnext.asynciterable"
    ],
    "resolveJsonModule": true
  }
}

Создайте файл .gitlab-ci.yml со следующим контентом:

image: node:latest

stages:
  - CodeQuality

test:
  stage: CodeQuality
  script: 
    - npm ci
    - npm run ci:test

lint:
  stage: CodeQuality
  script:
    - npm ci
    - npm run ci:lint

Каждый раз, когда кто -то совершает филиал, Codequality Стадии выше будут запускаются.

Из NPM документация о npm ci : Эта команда похожа на NPM Установка , за исключением того, что он предназначен для использования в автоматизированных средах, таких как тестовые платформы, непрерывная интеграция и развертывание — или в любой ситуации, когда вы хотите убедиться, что вы выполняете чистую установку своих зависимостей. Это может быть значительно быстрее, чем обычная установка NPM, пропустив определенные пользовательские функции. Он также более строгой, чем регулярная установка, которая может помочь уловить ошибки или несоответствия, вызванные постепенно установленными локальными средами большинства пользователей NPM.

git add .gitlab-ci.yml package.json package-lock.json karma.conf.js src/polyfills.ts tsconfig.json
git commit -m "core(ci): Add gitlab CI file and scripts"
git push -u origin develop

Пока ваш CI будет работать

npm run ci:test

а также

npm run ci:lint

Теперь вы можете следовать состоянию вашего CI на Gitlab. Перейти к CI/CD > Трубопроводы : Нажмите на соответствующий трубопровод, чтобы показать детали этапов:

Ng-shadow (4 серии деталей)

Оригинал: «https://dev.to/fairen/setup-a-basic-ci-40m6»

Читайте ещё по теме: