Что такое Schematics и как создать свой генератор?angular-79

Что такое Schematics?

Schematics — это мощный инструмент в экосистеме Angular, который позволяет автоматизировать процесс создания, модификации и поддержки кодовой базы. Это CLI-утилита, которая:

  • Генерирует шаблонный код (например, компоненты, сервисы, модули).
  • Модифицирует существующие файлы (например, добавляет импорты, обновляет конфигурации).
  • Удаляет или переименовывает части проекта.

Schematics используются в Angular CLI (например, при командах ng generate component). Они работают на основе шаблонов и правил преобразования AST (Abstract Syntax Tree).

Как создать свой генератор?

Создание собственного Schematics-генератора состоит из нескольких шагов:

1. Установка необходимых инструментов

npm install -g @angular-devkit/schematics-cli

2. Создание нового Schematics-проекта

schematics blank --name=my-generator

Эта команда создаст структуру проекта:

  • src/collection.json — описание доступных генераторов.
  • src/my-generator — папка с основным генератором.

3. Редактирование collection.json

Добавляем описание генератора:

{
  "schematics": {
    "my-generator": {
      "description": "Генератор чего-то полезного",
      "factory": "./my-generator/index#myGenerator"
    }
  }
}

4. Создание логики генератора

В файле src/my-generator/index.ts:

import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';

export function myGenerator(_options: any): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    // Пример: создание файла
    tree.create('/hello.txt', 'Это сгенерировано моим Schematics!');
    return tree;
  };
}

5. Тестирование генератора

npm run build
schematics .:my-generator

Для теста в реальном Angular-проекте:

npm link путь/к/вашему/generator
ng generate ваш-generator:my-generator

6. Публикация

npm publish

Пример: Генератор компонента с кастомными настройками

import { strings } from '@angular-devkit/core';
import { apply, mergeWith, Rule, template, url } from '@angular-devkit/schematics';

export function customComponent(options: any): Rule {
  return mergeWith(
    apply(url('./files'), [
      template({
        ...strings, // Встроенные хелперы для работы с именами (например, dasherize)
        ...options,
      }),
    ]),
  );
}

В папке files можно разместить шаблоны, например __name@dasherize__.component.ts.

Полезные возможности Schematics

  • AST-преобразования: Изменение кода через анализ абстрактного синтаксического дерева.
  • Интерактивность: Запрос параметров у пользователя через prompt().
  • Валидация: Проверка введенных данных перед генерацией.

Резюмируем

  • Schematics — это инструмент для автоматизации работы с кодом в Angular.
  • Создать свой генератор можно через @angular-devkit/schematics-cli.
  • Основные шаги: настройка collection.json, написание логики, тестирование.
  • Генераторы могут быть простыми (создание файлов) или сложными (модификация кода).

Вопросы

Собеседования