Шаблонная Webpack-сборка React-SPA-приложения на TypeScript

Описание

Этот проект представляет собой шаблонную сборку для разработки приложений на React с использованием TypeScript и Webpack. Включает в себя конфигурации для: линтинга, форматирования кода, поддержки SCSS, согласованных коммитов, деплоя на GitHub и автоматической генерации фавиконов.

Основные модули и пакеты проекта:

• React: мощная библиотека для создания интерактивных пользовательских интерфейсов;
• TypeScript: язык программирования, расширяющий возможности JavaScript, добавляя типизацию кода для максимальной безопасности разработки;
• Webpack: модульный бандлер для JavaScript приложений;
• Babel: транспайлер для преобразования современного JavaScript в совместимый с более старыми браузерами;
• Sass (SCSS): препроцессор CSS, добавляющий возможности удобного написания стилей, такие, как: переменные, вложенные правила и миксины;
• ESlint: инструмент для анализа кода на предмет соответствия ECMAScript-стандартам его написания;
• @typescript-eslint: набор инструментов для интеграции TypeScript с ESLint;
• Prettier: инструмент для форматирования кода;
• Stylelint: линтер для стилей;
• webpack-dev-server: локальный сервер для разработки с поддержкой "горячей" перезагрузки;
• mini-css-extract-plugin: плагин для извлечения CSS в отдельные файлы;
• html-webpack-plugin: плагин для генерации HTML-файлов;
• favicons-webpack-plugin: плагин для генерации фавиконов.

Структура проекта

• .husky: папка для хранения хуков Husky, которые помогают автоматизировать задачи при работе с Git;
• public: папка для статических файлов, таких, как index.html, которые будут использоваться в приложении;
• src: основная папка с исходным кодом приложения;
  • assets: папка для хранения статических ресурсов, таких, как: изображения, шрифты и т.д.;
  • components: папка для хранения React-компонентов;
  • pages: папка для хранения страниц приложения;
  • services: папка для хранения сервисов, таких как API-запросы;
  • utils: папка для хранения утилитарных функций и хелперов;
  • custom.d.tsx: файл для пользовательских типов TypeScript;
  • index.tsx: главный файл входа в приложение.
• .env: файл для хранения переменных окружения;
• .gitignore: файл для указания файлов и папок, которые должны быть проигнорированы системой контроля версий Git;
• .prettierignore: определяет файлы и папки, которые должны быть проигнорированы Prettier;
• .stylelintignore: файл для указания файлов и папок, которые должны быть проигнорированы Stylelint;
• eslint.config.mjs: определяет правила и настройки для ESLint;
• package.json: Содержит метаданные проекта, список зависимостей последних версий и скрипты для выполнения различных задач;
• postcss.config.mjs: Конфигурационный файл для PostCSS;
• prettier.config.mjs: конфигурационный файл для Prettier;
• stylelint.config.mjs: конфигурационный файл для Stylelint;
• tsconfig.json: конфигурационный файл для TypeScript;
• webpack.config.mjs: определяет конфигурацию для сборки проекта с помощью Webpack.

Скрипты

• start: запуск сервера разработки:

 npm run start

• eslint: запуск ESLint для проверки кода:

 npm run eslint

• stylelint: запуск Stylelint для проверки стилей:

 npm run stylelint

• format: форматирование кода с помощью Prettier:

 npm run format

• check: запуск всех проверок (ESLint, Stylelint и Prettier):

 npm run check

• build: сборка проекта для продакшена:

 npm run build

• deploy: проверка, сборка и деплой проекта:

 npm run deploy

Конфигурация Webpack

Конфигурация Webpack находится в файле webpack.config.mjs. Основные моменты:

• entry: точка входа в приложение;
• output: настройки выходных файлов;
• module: правила для обработки различных типов файлов;
• plugins: плагины для расширения функциональности Webpack.

Линтинг и форматирование

• ESLint: конфигурация находится в файле eslint.config.mjs;
• Stylelint: конфигурация находится в файле stylelint.config.mjs;
• Prettier: конфигурация находится в файле prettier.config.mjs.

Поддержка SCSS

Для поддержки SCSS используется sass-loader и style-loader. Конфигурация находится в файле webpack.config.mjs.

Автоматическая генерация фавиконов

Используется плагин favicons-webpack-plugin для автоматической генерации фавиконов. Конфигурация находится в файле webpack.config.mjs.