Генерация кода с использованием схематиков

Схематик (Schematic) — это генератор кода на основе шаблонов, поддерживающий сложную логику. Это набор инструкций для преобразования программного проекта путем генерации или изменения кода. Схематики упаковываются в коллекции и устанавливаются с помощью npm.

Коллекция схематиков может быть мощным инструментом для создания, изменения и поддержки любого программного проекта, но особенно она полезна для настройки проектов Angular под конкретные нужды вашей организации. Вы можете использовать схематики, например, для генерации часто используемых UI-паттернов или специфических компонентов, используя предопределенные шаблоны или макеты. Используйте схематики для соблюдения архитектурных правил и соглашений, делая ваши проекты единообразными и совместимыми.

Схематики для Angular CLI

Схематики являются частью экосистемы Angular. Angular CLI использует схематики для применения преобразований к проекту веб-приложения. Вы можете изменять эти схематики и определять новые, чтобы, например, обновить код для исправления критических изменений (breaking changes) в зависимости, или добавить новую опцию конфигурации или фреймворк в существующий проект.

Схематики, включенные в коллекцию @schematics/angular, запускаются по умолчанию командами ng generate и ng add. Пакет содержит именованные схематики, которые настраивают опции, доступные в CLI для подкоманд ng generate, таких как ng generate component и ng generate service. Подкоманды для ng generate являются сокращением для соответствующего схематика. Чтобы указать и сгенерировать конкретный схематик или коллекцию схематиков, используйте полную форму:

ng generate my-schematic-collection:my-schematic-name

или

ng generate my-schematic-name --collection collection-name

Настройка схематиков CLI

JSON-схема, связанная со схематиком, сообщает Angular CLI, какие опции доступны для команд и подкоманд, и определяет значения по умолчанию. Эти значения по умолчанию можно переопределить, предоставив другое значение для опции в командной строке. См. Конфигурация рабочего пространства для получения информации о том, как изменить значения по умолчанию для опций генерации в вашем рабочем пространстве.

JSON-схемы для стандартных схематиков, используемых CLI для генерации проектов и их частей, собраны в пакете @schematics/angular. Схема описывает опции, доступные CLI для каждой из подкоманд ng generate, как показано в выводе --help.

Разработка схематиков для библиотек

Как разработчик библиотеки, вы можете создавать свои собственные коллекции пользовательских схематиков для интеграции вашей библиотеки с Angular CLI.

Add schematic (схематик добавления) позволяет разработчикам устанавливать вашу библиотеку в рабочее пространство Angular с помощью ng add.
Generation schematics (схематики генерации) могут указывать подкомандам ng generate, как изменять проекты, добавлять конфигурации и скрипты, а также создавать структуру артефактов, определенных в вашей библиотеке.
Update schematic (схематик обновления) может указывать команде ng update, как обновлять зависимости вашей библиотеки и адаптироваться к критическим изменениям при выпуске новой версии.

Подробнее о том, как они выглядят и как их создавать, см.:

Схематики добавления (Add schematics)

Add schematic обычно поставляется вместе с библиотекой, чтобы её можно было добавить в существующий проект с помощью ng add. Команда add использует ваш менеджер пакетов для загрузки новых зависимостей и вызывает скрипт установки, реализованный в виде схематика.

Например, схематик @angular/material сообщает команде add о необходимости установить и настроить Angular Material и темизацию, а также зарегистрировать новые стартовые компоненты, которые можно создать с помощью ng generate. Используйте его как пример и образец для вашего собственного схематика добавления.

Партнерские и сторонние библиотеки также поддерживают Angular CLI с помощью схематиков добавления. Например, @ng-bootstrap/schematics добавляет ng-bootstrap в приложение, а @clr/angular устанавливает и настраивает Clarity от VMWare.

Add schematic также может обновлять проект, внося изменения в конфигурацию, добавляя дополнительные зависимости ( например, полифилы) или создавая каркас кода инициализации, специфичного для пакета. Например, схематик @angular/pwa превращает ваше приложение в PWA, добавляя манифест приложения и Service Worker.

Схематики генерации (Generation schematics)

Схематики генерации — это инструкции для команды ng generate. Документированные подкоманды используют стандартные схематики генерации Angular, но вы можете указать другой схематик ( вместо подкоманды) для генерации артефакта, определенного в вашей библиотеке.

Angular Material, например, предоставляет схематики генерации для UI-компонентов, которые он определяет. Следующая команда использует один из этих схематиков для рендеринга <mat-table> из Angular Material, предварительно настроенного с источником данных для сортировки и пагинации.

ng generate @angular/material:table <component-name>

Схематики обновления (Update schematics)

Команду ng update можно использовать для обновления зависимостей библиотек вашего рабочего пространства. Если вы не укажете опции или используете опцию справки, команда проанализирует ваше рабочее пространство и предложит библиотеки для обновления.

ng update
We analyzed your package.json, there are some packages to update:

    Name                                      Version                     Command to update
    --------------------------------------------------------------------------------
    @angular/cdk                       7.2.2 -> 7.3.1           ng update @angular/cdk
    @angular/cli                       7.2.3 -> 7.3.0           ng update @angular/cli
    @angular/core                      7.2.2 -> 7.2.3           ng update @angular/core
    @angular/material                  7.2.2 -> 7.3.1           ng update @angular/material
    rxjs                                      6.3.3 -> 6.4.0           ng update rxjs

Если вы передадите команде набор библиотек для обновления, она обновит эти библиотеки, их peer-зависимости, а также peer-зависимости, которые зависят от них.

ПОЛЕЗНО: Если есть несоответствия (например, если peer-зависимости не могут быть сопоставлены простым диапазоном semver), команда выдаст ошибку и ничего не изменит в рабочем пространстве.

Мы рекомендуем не принуждать к обновлению всех зависимостей по умолчанию. Попробуйте сначала обновить конкретные зависимости.

Подробнее о том, как работает команда ng update, см. в разделе Команда Update.

Если вы создаете новую версию своей библиотеки, которая вносит потенциальные критические изменения, вы можете предоставить update schematic (схематик обновления), чтобы команда ng update могла автоматически разрешить любые такие изменения в обновляемом проекте.

Например, предположим, что вы хотите обновить библиотеку Angular Material.

ng update @angular/material

Эта команда обновляет как @angular/material, так и её зависимость @angular/cdk в package.json вашего рабочего пространства. Если любой из пакетов содержит схематик обновления, охватывающий миграцию с существующей версии на новую, команда запустит этот схематик в вашем рабочем пространстве.