Стендап Сьогодні 📢 Канал в Telegram @stendap_sogodni

🤖🚫 AI-free content. This post is 100% written by a human, as is everything on my blog. Enjoy!

27.05.2023

Hugo як фреймворк для фронтенду

При створенні поста про похід довелося випробувати вбудовані в Hugo інструменти для компіляції JavaScript.

Висновок такий, що Hugo здатний замінити як сервер розробки, так і бандлер JavaScript. Це для мене дуже привабливо, бо використання Hugo дозволить поєднати статичний маркетинговий сайт та додаток в єдине ціле. Або міксувати блог та різні цікаві експерименти на JavaScript.

Для компіляції JavaScript Hugo містить бандлер ESBuild. Оскільки ESBuild написаний на Go та Hugo написаний на Go, то інтеграція відбувається на внутрішньому рівні. З поганого: конфігурація ESBuild прихована всередині, тому нічого з нею не зробиш. Наприклад, зараз вона не дає імпортувати SVG файли через технічно простий брак налаштувань. Але взагалі того, що є, цілком вистачає. Для Typescript можна редагувати tsconfig.json як звичайно.

Ще з поганого: плагіни ESBuild не підтримуються, бо для них потрібний інтерпретатор JavaScript. Тому — ніякого Svelte - шкода. А JSX та відповідно React вбудовані, та з ними проблем немає. (Взагалі в мене дуже поганий досвід використання Svelte як з ESBuild, так і з Babel, тільки з Vite все задовільно працює.)

Зате вбудована підтримка Babel, а для стилів - Sass, та PostCSS. Перезавантаження наживу добре працює. Причому файли JS та CSS включаються в шаблони звичайних сторінок, тому можна, скажімо, деякий скрипт додавати тільки на окремих сторінках (як я зараз роблю зі скриптом карти.) Також, само собою, вбудована мініфікація та хешування. А ще Hugo вміє підготувати зображення.

Щоб зробити SPA з внутрішніми шляхами, його базовий шаблон треба помістити в layouts/404.html; тоді всі сторінки, що не є статичними, будуть оброблені в SPA. Це працює як в локальному режимі, так і в продакшні, якщо правильно налаштувати (а саме, вказати вірну сторінку 404.)