Что такое Angular CLI Builder?

Angular CLI (Command Line Interface) — это мощный инструмент для разработчиков на Angular, который упрощает многие аспекты разработки приложений. Один из ключевых компонентов Angular CLI — это Builder, который предназначен для запуска различных задач в процессе разработки и сборки приложений.

Что такое Builder?

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

Примеры использования Builder

1. Сборка приложения: Стандартный builder, используемый для сборки Angular приложений, это @angular-devkit/build-angular:browser. Этот builder компилирует ваше приложение и создает оптимизированные файлы для развертывания.
2. Тестирование приложения: Для запуска тестов используется builder @angular-devkit/build-angular:karma. Он запускает тесты с использованием фреймворка Karma.
3. Запуск сервера разработки: Для разработки используется builder @angular-devkit/build-angular:dev-server, который запускает сервер и автоматически перезагружает страницу при изменении кода.

Настройка Builders в Angular

Builders настраиваются в файле angular.json вашего проекта. Рассмотрим структуру этого файла:

{
  "projects": {
    "my-angular-app": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/my-angular-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "my-angular-app:build"
          }
        }
      }
    }
  }
}

Параметры builder

В разделе options можно указать различные параметры, которые используются конкретным builder. Например для сборки приложения важно указать следующие параметры:

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

Создание собственного Builder

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

Простой пример собственного builder

1. Создайте новый проект с помощью Angular CLI и установите необходимые зависимости:

ng new custom-builder --skip-install
cd custom-builder
npm install @angular-devkit/architect @angular-devkit/core

2. Создайте файл custom-builder.ts:

import { BuilderContext, createBuilder } from '@angular-devkit/architect';
import { Observable, of } from 'rxjs';
import { catchError, map } from 'rxjs/operators';

export function customBuilder(options: any, context: BuilderContext): Observable<any> {
  context.logger.info('Запуск кастомного билдера...');

  // Ваш логика здесь
  return of({ success: true }).pipe(
    map(() => {
      context.logger.info('Кастомный билдер завершен успешно!');
      return { success: true };
    }),
    catchError(err => {
      context.logger.error('Ошибка в кастомном билдере:', err);
      return of({ success: false });
    })
  );
}

export default createBuilder(customBuilder);

3. Чтобы сделать ваш builder доступным в проекте, добавьте его в angular.json.

Заключение

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