CLI-инструменты

Установка и инициализация проекта

Для работы с Ant Design в JavaScript одним из ключевых инструментов является CLI-инструмент create-react-app совместно с antd. Он позволяет быстро развернуть проект с базовой конфигурацией, готовой к использованию компонентов Ant Design.

Установка стандартного шаблона React:

npx create-react-app my-app
cd my-app

После этого подключается Ant Design:

npm install antd

Для удобной работы с CLI Ant Design можно использовать официальные шаблоны:

npx create-react-app my-app --template antd

Это автоматически настраивает поддержку стилей Less, базовых тем и импорт компонентов в стиле ES Modules.

Импорт и настройка стилей

Ant Design использует Less-переменные для темизации. CLI позволяет сразу включить поддержку:

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.less';
import App from './App';

Для изменения темы создаются свои переменные:

// craco.config.js (с использованием @craco/craco)
const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

CLI позволяет автоматически применять эти настройки при запуске проекта через npm start или сборке npm run build.

Использование Ant Design CLI для компонентов

CLI Ant Design предоставляет команды для быстрого добавления компонентов и генерации boilerplate-кода:

  • Генерация страницы:
antd-cli generate page Home

Эта команда создаёт папку Home с базовой структурой React-компонента и подключением стилей.

  • Генерация компонента:
antd-cli generate component ButtonCustom

Автоматически создаются файлы ButtonCustom.jsx и ButtonCustom.less с шаблоном для дальнейшей кастомизации.

  • Добавление модулей и зависимостей:
antd-cli add form table

CLI обновляет package.json и подключает соответствующие модули, чтобы сразу можно было использовать компоненты без ручного импорта.

Локальная разработка и Hot Reload

Команда npm start в сочетании с CLI Ant Design запускает локальный сервер разработки с поддержкой Hot Reload. Все изменения в компонентах автоматически отображаются в браузере без перезагрузки страницы.

CLI умеет:

  • отслеживать изменения в .jsx и .less файлах;
  • пересобирать только изменённые модули;
  • автоматически обновлять тему и переменные Less без ручной компиляции.

Для работы с конфигурацией Webpack используется интеграция с Craco или react-app-rewired, позволяющая расширять базовый функционал create-react-app без «eject».

Сборка и оптимизация

Для подготовки проекта к продакшену используются стандартные команды:

npm run build

CLI автоматически оптимизирует:

  • tree-shaking для компонентов Ant Design;
  • минификацию CSS и JS;
  • разбивку кода (code-splitting) для уменьшения времени загрузки.

Можно дополнительно настроить Ant Design Babel plugin для автоматического импорта только используемых компонентов:

npm install babel-plugin-import --save-dev

Конфигурация .babelrc:

{
  "plugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }]
  ]
}

Это позволяет существенно снизить размер финальной сборки.

Настройка тем и глобальных переменных

CLI-инструменты поддерживают кастомизацию:

  • Изменение основного цвета:
modifyVars: { '@primary-color': '#1890ff' }
  • Смена шрифтов, размеров и отступов:
modifyVars: {
  '@font-size-base': '14px',
  '@border-radius-base': '4px',
  '@padding-lg': '24px'
}
  • Использование нескольких тем: CLI позволяет создавать несколько конфигураций .less и переключать их на лету через webpack или динамический импорт.

Поддержка TypeScript и ESLint

CLI Ant Design автоматически настраивает проект под TypeScript:

npx create-react-app my-app --template antd-ts

Поддержка ESLint и Prettier встроена для соблюдения единых стандартов кода. Команды CLI:

npm run lint
npm run format

проверяют стиль кода и автоматически исправляют мелкие несоответствия.

Интеграция с Ant Design Pro

CLI интегрируется с Ant Design Pro для создания админ-панелей:

npx create-umi my-admin
cd my-admin
npm install
npm start

CLI Pro версии добавляет:

  • роутинг с настройкой страниц;
  • генерацию CRUD-таблиц;
  • шаблоны Dashboard, Login, Form, List;
  • автоматическую поддержку авторизации и разрешений.

Использование CLI сокращает время разработки сложных корпоративных интерфейсов, сохраняя согласованность компонентов и стиля.

Основные команды CLI Ant Design

Команда Описание
antd-cli generate page <name> Создание новой страницы с шаблоном
antd-cli generate component <name> Создание компонента с подключением стилей
antd-cli add <module> Добавление модуля/компонента в проект
npm start Запуск локального сервера с Hot Reload
npm run build Сборка проекта для продакшена
npm run lint Проверка кода на соответствие стандартам
npm run format Автоформатирование кода

CLI-инструменты Ant Design обеспечивают комплексное управление проектом, ускоряют процесс разработки и автоматизируют интеграцию компонентов, стилей и тем, делая их неотъемлемой частью профессионального рабочего процесса с библиотекой.

Оглавление