Ускорьте разработку Angular с помощью схем / генераторов Nx

Повторное написание одних и тех же шаблонов кода может занять много времени и утомительно. В этом случае, используя схему, вы можете работать без помощи рук и ускорить разработку Angular.

Это руководство даст вам пошаговое руководство по созданию простой схемы / генератора Nx для вашего приложения Angular. Этот пост будет охватывать:

1. Настройка рабочего пространства Angular с помощью Nx CLI
2. Создание и запуск образца генератора рабочего пространства с помощью Nx CLI
3. Создание и запуск собственного генератора Nx

Прежде чем приступить к программированию, вам необходимо знать несколько концепций:

Что такое схема?

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

Что такое Nx?

Nx - это интеллектуальный и расширяемый фреймворк для сборки, который поможет вам спроектировать, протестировать и построить в любом масштабе.

В чем разница между генератором Nx и угловой схемой?

Схема может быть написана с использованием @nrwl/devkit или @angular-devkit. Схемы, написанные с помощью @nrwl/devkit, называются генератором. Схема и генератор - это в основном одно и то же, только с разными именами.

1. Настройте рабочее пространство Angular с помощью Nx CLI.

Прежде чем вы начнете использовать генератор Nx, вам необходимо настроить рабочее пространство NX, которое является средой для запуска Nx CLI.

Создайте рабочее пространство Nx, запустив:

npx create-nx-workspace@latest

После этой командной строки вы увидите несколько предустановок в терминале:

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

├── README.md
├── angular.json
├── apps
│   ├── sample-project
│   └── sample-project-e2e
├── decorate-angular-cli.js
├── jest.config.js
├── jest.preset.js
├── libs/
├── node_modules/
├── nx.json
├── package-lock.json
├── package.json
├── tools
│   ├── generators/
│   └── tsconfig.tools.json
└── tsconfig.base.json

2. Создайте и запустите образец генератора рабочего пространства с помощью Nx CLI.

2.1 Создание образца генератора Nx

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

Создайте образец генератора рабочего пространства, выполнив:

nx generate workspace-generator sampleGenerator(yourGeneratorName)

or

nx generate @nrwl/workspace:workspace-generator sampleGenerator

Что такое схемы рабочего пространства?

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

После выполнения приведенных выше команд вы увидите следующие изменения:

CREATE tools/generators/sampleGenerator/index.ts
CREATE tools/generators/sampleGenerator/schema.json
UPDATE package.json

index.ts содержит логику генератора, которая использует вспомогательные функции Nx libraryGenerator, formatFiles и installPackagesTask для создания библиотеки, ее форматирования и установки пакетов.

Генератор - это асинхронная функция, которая принимает два аргумента:

(1) дерево: реализация файловой системы

(2) варианты: входные переменные в соответствии с заданной схемой

schema.json - это файл JSON, связанный со схемой, который сообщает интерфейсу командной строки Nx, какие параметры доступны для команд и подкоманд, и определяет значения по умолчанию. В этом файле вы можете видеть, что в качестве имени библиотеки используется строковая переменная.

Вы можете увидеть новую структуру папок.

├── README.md
├── angular.json
├── apps
│   ├── testApp
│   └── testApp-e2e
├── decorate-angular-cli.js
├── jest.config.js
├── jest.preset.js
├── libs/
├── node_modules/
├── nx.json
├── package-lock.json
├── package.json
├── tools
│   ├── generators
│   │   └── sampleGenerator
│   │       ├── index.ts
│   │       └── schema.json
│   └── tsconfig.tools.json
└── tsconfig.base.json

2.2 Запустите генератор сэмплов

Чтобы запустить генератор рабочего пространства, созданный в 2.1, вы можете либо запустить Nx CLI с nx workspace-generator sampleGenerator sampleLibraryName, либо использовать VSCode расширение консоли Nx.

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

3. Создайте и запустите собственный генератор Nx.

3.1 Создайте свой собственный генератор Nx

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

В этом посте мы собираемся использовать имена, generateFiles, formatFiles, для создания нашего настраиваемого генератора.

• generateFiles - Создать папку с файлами на основе предоставленных шаблонов.
• formatFiles - Отформатируйте все созданные или обновленные файлы с помощью Prettier.

Логика генератора в index.ts

Чтобы написать шаблон, вам нужно будет использовать двойное подчеркивание для объявления переменной-заполнителя, которая будет заменена вашим собственным значением. Обратите внимание, что в Nx вы не можете использовать функцию в функции-заполнителе, но в Angular вы также можете использовать переменную @ functionName для передачи объявленной переменной во встроенную функцию. Например, strings.classify, чтобы получить имя класса.

Генератор шаблона в __fileName__.service.ts__tmpl__.

Структура ваших папок будет такой:

… (same as previous)
├── package.json
├── tools
│   ├── generators
│   │   └── sampleGenerator
│   │       ├── files
│   │       │   └── __fileName__
│   │       │       └── __fileName__.service.ts__tmpl__
│   │       ├── index.ts
│   │       ├── models
│   │       │   └── schema.model.ts
│   │       └── schema.json
│   └── tsconfig.tools.json
├── tsconfig.base.json
└── tslint.json

3.2 Запустите собственный генератор NX

Создав файлы настраиваемого генератора, вы можете:

ng workspace-generator sampleGenerator testLibrary

Вы можете увидеть результаты в терминале:

CREATE libs/test-library/test-library.service.ts

Сгенерированный файл выглядит так:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
   providedIn: 'root',
})
export class TestLibraryService {
   constructor(private http: HttpClient) {}
}

Заключение

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

Ура и спасибо за чтение!

Другие сообщения:

• Создание углового компонента с изменяемым размером и перетаскиванием
• Превратите Angular в статический веб-сайт и разместите его на AWS S3 с вашим личным доменом
• Развертывание бессерверного Angular с рендерингом на стороне сервера на AWS Lambda.
• Будьте осторожны при передаче асинхронной функции в качестве параметра
• Обработка ошибок асинхронной функции JavaScript - это не то, о чем вы думаете
• Создайте бесплатную бессерверную контактную форму с помощью Gmail, Node и AWS Lambda
• Пошаговое руководство по обновлению приложения Angular с CSS до SCSS

Больше контента на plainenglish.io