Схема разработки

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

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

Концепции схем

Общедоступный API для схем определяет классы, которые представляют основные концепции.

  • Виртуальная файловая система представлена ​​деревом. Структура данных Tree содержит базу (набор файлов, которые уже существуют) и промежуточную область (список изменений, которые необходимо применить к базе). При внесении изменений вы фактически не изменяете базу, а добавляете эти изменения в промежуточную область.
  • Объект правила определяет функцию, которая принимает дерево, применяет преобразования и возвращает новое дерево. . Главный файл схемы index.ts определяет набор правил, реализующих логику схемы.
  • Преобразование представлено действием. Существует четыре типа действий: Создать , Переименовать, Перезаписать и Удалить .
  • Каждая схема выполняется в контексте, представленном с помощью объекта SchematicContext.

Объект контекста, переданный в правило, обеспечивает доступ к служебным функциям и метаданным, с которыми может потребоваться работа схемы, включая API ведения журнала для помощи при отладке. Контекст также определяет стратегию слияния, которая определяет способ слияния изменений из поэтапного дерева в базовое дерево. Изменение может быть принято, проигнорировано или выдано исключение.

Определение правил и действий

Когда вы создаете новую пустую схему с помощью интерфейса командной строки Schematics, сгенерированная функция ввода является правилом фабрика. Объект RuleFactory определяет функцию более высокого порядка, которая создает правило. Приведенный ниже фрагмент кода иллюстрирует больше.

  import {Rule, SchematicContext, Tree} from '@ angular-devkit/schematics';//Вам не нужно экспортировать функцию по умолчанию.//Вы можете  также иметь более одной фабрики правил для каждого файла. функция экспорта helloWorld (_options: any): Rule {return (tree: Tree, _context: SchematicContext) => {return tree;  };}  

Живая демонстрация:

Это просто фрагмент кода, объясняющий конкретную концепцию, и не может иметь какой-либо вывод

См. Pen RuleFactory от w3resource (@ w3resource) на CodePen.

Ваши правила могут вносить изменения в ваши проекты, вызывая external инструменты и логика реализации. Например, вам нужно правило, чтобы определить, как шаблон в схеме должен быть объединен с хостинговым проектом.

Правила могут использовать служебные программы, поставляемые с пакетом @ schematics/angular. Ищите вспомогательные функции для работы с модулями, зависимостями, TypeScript, AST, JSON, рабочими пространствами и проектами Angular CLI и т. Д.

  import {JsonAstObject, JsonObject, JsonValue, Path,  normalize, parseJsonAst, strings,} from '@ angular-devkit/core';  

Живая демонстрация:

Это просто фрагмент кода, объясняющий конкретную концепцию, и может не иметь вывода

См. Раздел «Использование пера в правилах» на сайте w3resource (@ w3resource) на CodePen.

Определение параметров ввода с помощью схемы и интерфейсов

Правила могут собирать значения параметров от вызывающего и вставлять их в шаблоны. Параметры, доступные для ваших правил, с их допустимыми значениями и значениями по умолчанию, определены в файле схемы схемы JSON, /schema.json. Вы можете определить переменные или перечисляемые типы данных для схемы, используя интерфейсы TypeScript.

Вы можете увидеть примеры файлов схемы для схем команд Angular CLI в @ schematics/angular

Интерфейс командной строки для схем

Схемы имеют собственный инструмент командной строки. Используя Node 6.9 или выше, установите инструмент командной строки Schematics глобально:

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

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

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

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

Создание коллекции схем

Следующая команда создает новую схему с именем hello-world в новой папке проекта того же имя.

  `` schematics blank --name = hello-world``  

Предоставляется пустая схема с помощью интерфейса командной строки Schematics. Команда создает новую папку проекта (корневую папку для коллекции) и исходную именованную схему в коллекции.

Перейдите в папку коллекции, установите зависимости npm и откройте новую коллекцию в ваш любимый редактор, чтобы увидеть сгенерированные файлы. Например, если вы используете VSCode:

  `` npm installnpm run buildcode.  ``  

Исходная схема получает то же имя, что и папка проекта, и создается в src/hello-world. Вы можете добавить связанные схемы в эту коллекцию и изменить сгенерированный скелетный код, чтобы определить функциональность схемы. Каждое имя схемы должно быть уникальным в коллекции.

Запуск схемы

Используйте команду schematics для запуска именованной схемы. Укажите путь к папке проекта, имя схемы и все обязательные параметры в следующем формате.

  schematics :  -  =   

Живая демонстрация:

Это просто фрагмент кода, объясняющий конкретную концепцию и не имеющий вывода

См. «Перо» Запуск схемы с помощью w3resource (@ w3resource) на CodePen.

Путь может быть абсолютным или относительным к текущему рабочему каталогу, в котором выполняется команда. Например, чтобы запустить схему, которую мы только что сгенерировали (которая не имеет обязательных параметров), используйте следующую команду.

  `` schematics.: Hello-world `` ` 

Добавление схемы в коллекцию

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

  `` `` cd hello-worldschematics blank --name = goodbye-world ``  

Команда генерирует новую именованную схему внутри вашей коллекции с основным файлом index.ts и связанной с ним тестовой спецификацией. Он также добавляет имя, описание и фабричную функцию для новой схемы в схему коллекции в файле collection.json.

Содержимое коллекции

Верхний уровень корневой папки проекта для коллекции содержит файлы конфигурации, папку node_modules и папку src/. Папка src/содержит подпапки для именованных схем в коллекции и схему collection.json, которая описывает собранные схемы. Каждая схема создается с именем, описанием и заводской функцией.

  {"$ schema": "../node_modules/@angular-devkit/schematics/collection-schema  .json "," schematics ": {" hello-world ": {" description ":" Пустая схема. "," factory ":"./hello-world/index # helloWorld "}}  

Живая демонстрация:

Это просто фрагмент кода, объясняющий конкретную концепцию и не имеющий вывода

См. содержимое коллекции Pen от w3resource (@ w3resource) на CodePen.

Свойство $ schema определяет схему, которую CLI использует для проверки.

  • В свойстве schematics перечислены именованные схемы, принадлежащие этой коллекции. Каждая схема имеет текстовое описание и указывает к сгенерированной функции ввода в основном файле.
  • Свойство factory указывает на сгенерированную функцию ввода. В этом примере вы вызываете схему hello-worldschematic, вызывая функцию фабрики helloWorld ().
  • Необязательное свойство схемы указывает на файл схемы JSON, который определяет параметры командной строки, доступные для схемы.
  • Необязательный массив псевдонимов определяет одну или несколько строк, которые могут быть используется для вызова схемы. Например, схема для Angu У команды lar CLI «generate» есть псевдоним «g», что позволяет использовать команду ng g.

Именованные схемы

Когда вы используете интерфейс командной строки Schematics для создания пустого проекта схемы, новая пустая схема является первым членом коллекции и имеет то же имя, что и коллекция. Когда вы добавляете новую именованную схему в эту коллекцию, она автоматически добавляется в схему collection.json.

В дополнение к имени и описанию каждая схема имеет свойство factory, которое идентифицирует запись схемы точка. В этом примере вы вызываете определенные функции схемы, вызывая функцию helloWorld () в основном файле hello-world/index.ts.

Оцените статью
nanomode.ru
Добавить комментарий