Это вторая часть серии статей, которые помогут вам создать публикуемую библиотеку Angular 7 с помощью Nrwl Nx Angular Extensions.
В этой статье рассматриваются следующие вещи:
- Настройка страниц GitHub
- Настройка Travis CI
- Дополнительно — установите compodoc для улучшения документации.
Вот ссылки на все части этой серии:
Часть 1. Создание библиотеки Angular с помощью Nrwl Nx
"Часть 2". Публикация документации библиотеки Angular, созданной с помощью Nx, с использованием TravisCI и GitHub Pages.
Часть 3. Публикация библиотеки Angular, созданной с помощью Nx, в NPM
Часть 4. Создание файла журнала изменений для библиотеки Angular
Настройка страниц GitHub
Начнем с включения GitHub Pages в репозитории библиотеки.
Перейдите в свой репозиторий в GitHub, и на страницах настроек вы найдете раздел для настройки GitHub Pages.blue.
Обязательно используйте ветку gh-pages и «Enforce HTTPS», как показано ниже:
Настроить Тревиса
- Добавьте файл .travis.yml в корень вашего проекта со следующей конфигурацией:
// .travis.yml language: node_js node_js: - '9' dist: trusty sudo: required branches: only: - master before_script: - npm install -g @angular/cli script: - ng build --prod --base-href https://alfredoperez.github.io/ngx-datacontext/ deploy: provider: pages skip_cleanup: true github_token: $GITHUB_TOKEN local_dir: dist/apps/documentation/ on: branch: master
Позвольте мне кратко рассказать о том, что делает этот файл.
Чтобы создать приложение на Travis CI, ему необходимо иметь Angular CLI, и это достигается следующим образом:
// .travis.yml ... before_script: - npm install -g @angular/cli
После этого он выполнит команду сборки из CLI, но установит href туда, где он должен быть развернут, используя имя репозитория. В моем случае я развертываю репозиторий в «ngx-datacontext».
// .travis.yml ... script: - ng build --prod --base-href https://alfredoperez.github.io/ngx-datacontext/
2. Переместите файл в репозиторий Github, поскольку он понадобится Travis CI при развертывании.
3. Создайте учетную запись на https://travis-ci.org/, свяжите ее со своей учетной записью GitHub и включите ее для репозитория библиотеки.
3. Добавьте токен Github для развертывания из Travis на страницы Github. Для этого сначала измените раздел развертывания в файле travis.yml, включив в него переменную для токена.
// .travis.yml ... deploy: provider: pages skip_cleanup: true github_token: $GITHUB_TOKEN local_dir: dist/apps/documentation/ on: branch: master
4. Создайте токен личного доступа Github, следуя инструкциям:
5. Добавьте токен в настройки Travis CI
Попробуйте Travis CI и Github Pages!
Это все, что нужно для развертывания на Github Pages с помощью Travis CI.
Travis запускает развертывание каждый раз, когда фиксация отправляется в репозиторий библиотеки, а веб-сайт документации будет размещаться на страницах Github.
— ДОПОЛНИТЕЛЬНО — Добавить документацию Compodoc
В качестве дополнения я хочу пройти процесс добавления compodoc для улучшения документации библиотеки Angular.
- Установить комподок
yarn add @compodoc/compodoc
2. Добавьте скрипты для выполнения compodoc в package.json.
Примечание. Путь указан к tsconfig из библиотеки, используемой для создания документации.
// package.json
...
"build:doc": "./node_modules/.bin/compodoc
-p libs/core/tsconfig.lib.json
--theme Readthedocs
-d dist/apps/documentation/compodoc ",
"serve:doc": "./node_modules/.bin/compodoc
-p libs/core/tsconfig.lib.json
--theme Readthedocs
-d dist/apps/documentation/compodoc
-s",
3. Добавьте ссылку на compodoc index.html
<a href="compodoc/index.html" target="_blank"> Documentation </a>
4. Добавьте скрипт в конфигурацию .travis.yml
// .travis.yml ... script: - ng build --prod --base-href https://alfredoperez.github.io/ngx-datacontext/ - npm run build:doc
Попробуйте!
Вот пример страницы Github, развернутой с помощью Travis:
