Автоматизация создания многоразовых пакетов TypeScript

В последнее время я уделял много внимания созданию инструментов автоматизации, которые повышают продуктивность наших команд разработчиков. После оценки множества платформ автоматизации, включая nx и yeoman, мы остановились на Angular Schematics как на нашей платформе выбора. В этой статье будет рассмотрена простая схема создания оптимального пакета TypeScript, который поддерживает изоморфный JavaScript (может работать как на клиенте, так и на сервере). Мы также собираемся подчеркнуть важность инструментов автоматизации в хорошем дизайне системы.

Почему Angular Schematics?

Angular Schematics предлагает возможность компоновки, которой нет в других генераторах. Его встроенные утилиты поддерживают функциональные концепции, включая каррирование и композицию функций. Schematics также смешивает JSON с TypeScript, чтобы обеспечить более быстрое повторное использование кода. Я могу составлять новые схемы из существующих или существующих функций генератора. Он также способствует безопасности типов за счет использования TypeScript. А Angular Schematics не зависит от приложений Angular. Например, у нас есть генераторы схем для компонентов React.

Что определяет пакет передовой практики?

Пакеты компонентов многократного использования являются основой продуктивных групп. Следовательно, наши команды по инфраструктуре должны правильно разработать архитектуру пакета. Для нас передовая практика должна включать следующее:

  1. Поддержка всех основных модульных систем
  2. Статический анализ кода
  3. Автоматизация тестирования
  4. Документация
  5. Инструменты для совместной работы на Github

Наша Angular Schematic использует WebPack для генерации модуля UMD, используемого всеми загрузчиками целевых модулей (CommonJS, AMD, ES и тегами скриптов). TypeScript, ESLint и Prettier обеспечивают хороший статический анализ кода. Карма и Жасмин обеспечивают автоматизацию тестирования. Typedoc используется для создания документации по каждой сборке. А Huskey выполняет проверки перед фиксацией, а папка .github включает файл владельцев кода и шаблон PR, чтобы обеспечить надежную совместную работу с Github. Посмотрите демо ниже.

Если вы не знакомы с Angular Schematics, прочтите эту статью. Вам не обязательно понимать все концепции Angular Schematic. Вы должны понимать, насколько автоматизация сокращает количество человеческих ошибок и способствует продвижению передовых методов. Суть нашей схемы ниже.

Точка входа в нашу схему - collection.json. Он определяет нашу схематическую фабричную функцию и файл схемы. Файл schema.json определяет параметры, которые можно передавать как аргументы или вводить через командную строку. Наша create функция, определенная в index.ts, выполняет всю тяжелую работу, загружая файлы шаблонов с параметрами для интерполяции, собранными с помощью аргументов или подсказок.

В нашей схеме используются файлы шаблонов, включенные в каталог files вышеупомянутого репозитория. Эти шаблоны принимают параметры нашей схемы для интерполяции. Что еще более важно, они включают в себя все необходимые зависимости разработчика, скрипты и шаблон:

Чтобы выполнить нашу схему локально, выполните следующую команду:

schematics ./src/collection.json:create --dry-run false

Запустив нашу схему и следуя подсказкам, мы получаем стандартный пакет TypeScript со всеми нашими лучшими практиками (обязательно ознакомьтесь с демонстрацией). Исходный код этой схемы доступен на GitHub, поэтому вы можете протестировать и внести изменения.

Давайте вспомним функции, которые включает этот сгенерированный пакет:

  1. Модули UMD для использования как в клиентских, так и в серверных приложениях
  2. Безопасность типов
  3. Проверки перед фиксацией с помощью ESlint и Prettier
  4. Средство выполнения тестов с тестовым шаблоном
  5. Создавайте, тестируйте и публикуйте скрипты
  6. Сгенерирована документация с помощью Typedoc.
  7. Инструменты для совместной работы Github, включая владельцев кода и шаблон запроса на вытягивание.
  8. Инструкции по сборке и тестированию пакета
  9. Журнал изменений
  10. Правильные файлы игнорирования

Что еще более важно, вот чего мы не получаем:

  1. Человеческие ошибки, связанные с копированием шаблона
  2. Несоответствующий дизайн упаковки
  3. Задержки, связанные с несовместимыми модулями
  4. Коммиты, которые забивают нашу систему сборки предотвращаемыми ошибками
  5. Недокументированный код
  6. Отсутствует PR-информация
  7. Отсутствуют необходимые отзывы
  8. Отсутствует автоматизация тестирования
  9. Недокументированные изменения
  10. Отслеживаемые файлы, которые не следует отслеживать

Такие простые генераторы можно написать за день или меньше. Более сложные генераторы могут потребовать от одного разработчика двухнедельного спринта или меньше. Время, сэкономленное после того, как эти решения с низким кодом окажутся в руках производственных команд, во много раз больше этого (вероятно, на порядки в ближайшем будущем). Приверженность созданию средств автоматизации - это приверженность шаблонам проектирования, согласованным с генераторами кода. Системы, которым это выгодно, обычно попадают в категорию хорошо спроектированных. Если вы не выделяете время на создание решений с низким уровнем кода, вы, скорее всего, оставите на столе и время, и деньги. Познакомьтесь с Angular Schematics и узнайте, что вы можете автоматизировать.