Как создать схемы для библиотек?

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

Шаг 1: Установка необходимых пакетов

Для начала вам понадобится установить Angular CLI, если он у вас ещё не установлен. Вы можете сделать это с помощью npm:

npm install -g @angular/cli

Затем создайте новый проект библиотеки (если у вас его ещё нет):

ng generate library my-library
cd projects/my-library

Шаг 2: Создание схемы

Сначала создайте папку для своих схем, если её ещё нет:

mkdir schematics

Теперь создадим новую схему. Для этого создайте новый каталог внутри schematics:

cd schematics
mkdir my-schematic

Внутри my-schematic создайте файл collection.json, который будет описывать вашу схему:

{
  "$schema": "http://json.schemastore.org/schematics",
  "schematics": {
    "my-schematic": {
      "description": "Схема для создания нового компонента.",
      "factory": "./my-schematic/index",
      "schema": "./my-schematic/schema.json"
    }
  }
}

Создайте index.ts внутри my-schematic:

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

export function mySchematic(options: any): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    const templateSource = `import { Component } from '@angular/core';

@Component({
  selector: 'app-${options.name}',
  templateUrl: './${options.name}.component.html',
  styleUrls: ['./${options.name}.component.css']
})
export class ${options.className}Component { }
`;

    tree.create(`${options.name}.component.ts`, templateSource);
    return tree;
  };
}

Шаг 3: Создание схемы (schema.json)

Создайте файл schema.json, чтобы конфигурировать параметры, которые может принимать ваша схема. Например:

{
  "$schema": "http://json.schemastore.org/schematisch",
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "description": "Имя компонента."
    }
  },
  "required": ["name"]
}

Шаг 4: Запуск вашей схемы

Теперь, когда у вас есть схема, вы можете запустить её, используя Angular CLI. Вернитесь в корень вашего проекта и выполните:

ng generate my-library:my-schematic --name=my-new-component

Этот процесс создаст новый файл my-new-component.component.ts с определением компонента.

Заключение

Создание схем для библиотек в Angular — это отличный способ автоматизировать процесс разработки компонентов и других элементов. Вы можете настраивать ваши схемы в соответствии с потребностями вашего проекта, добавляя дополнительные параметры и функционал. Это может значительно ускорить работу вашей команды и улучшить качество кода.