#2766: vite.config.ts [RU]

projectforge-webapp/vite.config.ts Конфигурация сборки Vite · projectforge-webapp/vite.config.ts 62 строки · 59 кода · 1 комментарий · 2 пустых

Файл конфигурации системы сборки Vite, заменивший инструментарий на основе webpack от Create React App. Этот единственный файл управляет всем конвейером разработки и сборки: трансформация JSX/TSX через @vitejs/plugin-react, пользовательский плагин esbuild для обработки JSX в сторонних .js модулях node_modules (например, react-rrule-generator), компиляция SCSS, проксирование dev-сервера к Java-бэкенду и конфигурация тестового раннера Vitest. Создан в ходе масштабной миграции, устранившей 43 уязвимости npm путём замены устаревшей цепочки зависимостей react-scripts на более лёгкий стек инструментов Vite.

Архитектура

Пользовательский плагин: rruleJsxPlugin

Это самая необычная часть конфигурации. Некоторые npm-пакеты (в частности, react-rrule-generator) поставляют .js файлы, содержащие синтаксис JSX, который Vite обычно обрабатывает только в файлах .jsx. Плагин rruleJsxPlugin перехватывает трансформации модулей с enforce: 'pre', обнаруживает любые .js файлы из пакета react-rrule-generator (или любые файлы node_modules, содержащие JSX-подобные паттерны через регулярное выражение /<[A-Z]\w*[\s/>]/) и обрабатывает их через esbuild с loader: 'jsx'. Это предотвращает ошибки Vite при обнаружении "сырого" JSX в .js файлах. Выходные данные нацелены на формат cjs со стандартом esnext.

Конвейер плагинов

rruleJsxPlugin() запускается первым (enforce: pre) для трансформации нестандартных JSX-файлов, затем react() (официальный плагин Vite для React) обрабатывает стандартную трансформацию JSX/TSX с поддержкой Fast Refresh.

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

Настройка css.preprocessorOptions.scss.loadPaths добавляет ./node_modules в путь импорта SCSS, что позволяет использовать импорт вида @import "bootstrap/scss/bootstrap" без обхода относительных путей.

Конфигурация сборки

Вывод осуществляется в папку build/ (соответствует соглашению CRA), sourcemaps отключены, минификация выключена (серверный Wicket занимается оптимизацией ресурсов), а maxParallelFileOps: 1 ограничивает параллельные файловые операции — это обходной путь для исчерпания файловых дескрипторов в некоторых системах.

Прокси dev-сервера

Два прокси-правила перенаправляют запросы /rs и /rest на http://localhost:8080 (бэкенд Spring Boot). Это критически важный элемент, благодаря которому baseURL в rest.js работает как пустая строка — прокси Vite обрабатывает префиксную маршрутизацию, поэтому React-приложение всегда вызывает относительные URL, а dev-сервер прозрачно перенаправляет их на соответствующий бэкенд-эндпоинт.

Тестирование: Vitest

Заменяет Jest (тестовый раннер CRA). Настроен с окружением jsdom (браузероподобное DOM для компонентных тестов), globals: true (чтобы it, expect, describe работали без импортов) и шаблонами тестовых файлов, соответствующими суффиксам .test. и .spec. для всех вариантов JS/TS.

История Git

Коммит Что изменилось

bf988bc6d Создан файл в рамках комплексной миграции с react-scripts на Vite. Представлен полный инструментарий: плагины Vite, пользовательский обработчик JSX для rrule, поддержка SCSS, dev-прокси с двумя бэкенд-маршрутами, конфигурация сборки и настройка тестового раннера Vitest. Этот единственный файл заменил весь слой конфигурации webpack от CRA.

Коммит	Что изменилось
`bf988bc6d`	Создан файл в рамках комплексной миграции с react-scripts на Vite. Представлен полный инструментарий: плагины Vite, пользовательский обработчик JSX для rrule, поддержка SCSS, dev-прокси с двумя бэкенд-маршрутами, конфигурация сборки и настройка тестового раннера Vitest. Этот единственный файл заменил весь слой конфигурации webpack от CRA.