Что такое Schematics CLI?

Schematics в Angular – это мощный инструмент, который позволяет разработчикам автоматизировать создание и конфигурирование различных компонентов и модулей в приложениях Angular. Он предназначен для работы с Angular CLI и предоставляет механизмы для генерации, модификации и управления проектами.

Зачем нужен Schematics?

1. Автоматизация: Schematics помогает автоматизировать повторяющиеся задачи, такие как создание новых компонент, сервисов или других сущностей в приложении.
2. Стандартизация: Используя Schematics, команды могут придерживаться единого стиля кода и структуры проекта, что упрощает поддержание проекта.
3. Генерация кода: Вы можете быстро генерировать boilerplate-код для новых частей приложения, экономя время и снижая количество ошибок.

Как работает Schematics?

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

Пример создания нового компонента с использованием Schematics

Для начала работы с Schematics вы можете выполнить следующие шаги:

1. Установка Angular CLI (если он ещё не установлен):

   npm install -g @angular/cli
   

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

   ng new my-angular-app
   cd my-angular-app
   

3. Создание нового компонента с помощью Schematics:

   ng generate component my-new-component
   

   
   Это команда сгенерирует новый компонент с именем my-new-component и создает несколько файлов:
   • my-new-component.component.ts
   • my-new-component.component.html
   • my-new-component.component.css
   • my-new-component.component.spec.ts
   
   Также Angular CLI автоматически зарегистрирует новый компонент в соответствующем модуле.

Создание пользовательских схем

Вы также можете создавать свои собственные схемы с помощью Schematics. Для этого вы можете использовать следующие шаги:

1. Создание нового пакета с Schematics:

   ng new my-schematic --collection
   

2. Перейдите в созданный каталог и откройте файл collection.json. Здесь вы можете настроить свой файл Schematics.
3. Создайте новую схему в подкаталоге, например src/my-schematic/, где создайте файл schema.json для описания вашей схемы.
   Пример schema.json:

   {
     "$schema": "http://json.schemastore.org/schemastore",
     "id": "MySchematic",
     "title": "My Schematic",
     "type": "object",
     "properties": {
       "name": {
         "type": "string",
         "description": "Имя вашего нового компонента."
       }
     },
     "required": ["name"]
   }
   

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

   import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
   import { Schema } from './schema';
   
   export function mySchematic(options: Schema): Rule {
     return (tree: Tree, _context: SchematicContext) => {
       const content = `export class ${options.name} {}`;
       tree.create(`${options.name}.ts`, content);
       return tree;
     };
   }
   

Заключение

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