Подумал тут, что talk is cheap и стоило бы, наверное, показать свой

19 февраля 2025 г.Будни разработчика
Подумал тут, что talk is cheap и стоило бы, наверное, показать свой | 🔁 Новости из телеграм - Ghostbase News

#заметка дня

Подумал тут, что talk is cheap и стоило бы, наверное, показать свой получившийся конфиг Rspack из предыдущего поста.

Когда-то я очень сильно топил за то, что тулинг для простых задач должен быть максимально простым. Я во все поля использовал create-react-app для React-проектов, но при этом использовал Broccoli.js (интересно, кто из подписчиков о нём знает?) для сборки лендингов и классических сайтов.

Не в последнюю очередь из-за скорости, но и формат конфига казался проще, чем у Gulp.

Использование же Webpack для классических HTML-страниц или библиотек выглядело тогда как совершенный бред. Вебпак — по своей сути — собирает все ресурсы в один JS-бандл (да-да, под словом все я имею в виду и HTML, и CSS, и JSON и вообще что угодно, включая картинки) и потом, если настроено, выплёвывает обратно уже обработанные файлы.

Тулинг прошёл большой путь с тех пор. И прямо сейчас в интернетах проходит срач на тему того, что create-react-app объявили устаревшим, а вместо него разработчикам предлагают подвязаться на Next.js, почти безальтернативно. При этом, команда React продолжает активно всех убеждать, что SPA всё ещё имеет смысл и конечно-конечно они не заставляют всех перейти на фреймворки и RSC. А ребятам из Vite.js крайне обидно :)

А мне, в свою очередь, обидно, что мало кто знает про Rspack! Потому, пришло время вам узреть мой конфиг :) Точнее, один из: https://gist.github.com/bekharsky/14ddc91ad72c736d56536b2fa4e16ea1

Если вы знакомы в Webpack, ничего удивительного не найдёте. А если вам придётся одновременно собирать несколько точек входа — то, поверьте, даже в Vite.js придётся прописать несколько html-файлов.

Итак, из интересного:

  1. Несколько точек входа aka index.tsx-файлов в entry:

    entry: {

     main: './src/index.tsx',

 migrationTool: './migrationTool/index.tsx',

 insights: './insights/index.tsx',

    },

  2. Специально прописанный publicPath в секции output, позволяющий сёрвить результат откуда угодно (в моём случае — из Google Sheets). В идеале, он должен браться из .env:

output: {

publicPath: `https://www.somedevtunnel.com/static/`,

...

}

  1. В секции module можно встретить кастомные загрузчики. И выглядят они довольно страшно, но на самом деле буквально взяты из документации по Fast Refresh. SCSS и PostCSS поддерживаются стандартными scss-loader и postcss-loader.

Опять же, если хочется простой замены CRA или Vite — есть Rsbuild, https://rsbuild.dev/. В нём всё из коробки.

Но, в целом, понимать, что же происходит — нужно.

  1. Одной из крайне необходимых в легаси-проектах вещей является поддержка старых библиотек и плагинов. Поэтому в секции plugins я буквально копирую пару старых файлов в нужное место. Ну и, конечно, индикатор текущей среды — process — так необходимый реакту.

  2. И что у нас остаётся? А остаётся немного настроить devServer. Я не использую https по простой причине: этим занимаются туннели. Ну и запись на диск совсем не обязательна. Да и вообще этот конфиг не нужен, если. не менять порт и работать локально.

Повторю, всё это уже из коробки имеется что в Vite, что в Rsbuild. В большинстве случаев конфиг или совсем не нужен, или будет раза в три меньше.

И если вы продолжаете собирать SPA — совсем не обязательно переходить на Next. В этом отношении мне поведение команды React очень непонятно.

Если интересна тема настройки конфигов сборки — пишите. Например, в том же Vite можно иметь несколько HTML-файлов и собирать их одновременно.

#rspack #rsbuild #config

Ссылка на постВ канал