Анонс Vituum — шаблонные движки и многое другое в Vite

В течение последних месяцев мы в Newlogic Digital работали над собственным проектом с открытым исходным кодом, построенным на базе Vite.

Он называется Vituum, сочетание слов Vite (французское слово, означающее «быстро») и Tuum (эстонское слово, означающее «ядро»).

Попробуйте!

Если вы хотите попробовать все прямо сейчас, посетите раздел «Пробуем Vituum онлайн» на официальном сайте. Здесь вы можете попробовать множество онлайн-примеров прямо сейчас на StackBlitz.

Так что же такое Vituum?

Это небольшая обертка вокруг Vite, которая включает в себя предопределенные конфигурации и интеграции. Основная цель — добавить некоторые дополнительные возможности поверх Vite.

  • Основной упор делается на легкую интеграцию с бэкендом, но может быть использован для чего угодно.
  • Используется модифицированная команда сборки vituum build, которая поддерживает сборку файлов шаблонизатора, заканчивающихся на ext-name, таких как .twig, .pug или .latte.

Считайте, что это стартовый пакет Vite, готовый к работе.

Это также мост для разработчиков, которые все еще зависят от шаблонизаторов или старых front-end инструментов, таких как gulp или grunt, и хотят перейти на Vite.

Шаблонные движки

Сегодня фронтенд-инструменты потрясающие, но старые добрые шаблонные движки уже не пользуются достаточной любовью.

Vituum пытается изменить эту ситуацию с помощью поддержки шаблонизаторов в Vite. Шаблоны должны быть быстрыми!

Twig, Liquid, Pug, Nunjucks, Handlebars, Latte — их великое множество!

Шаблонные движки отлично подходят для быстрого создания прототипов и быстрой подготовки шаблонов для бэкенд-интеграций, таких как Symfony, Laravel или Nette.

Узнайте больше о шаблонизаторах на сайте vituum.dev

Поддержка многостраничности

Vituum позволяет легко использовать несколько файлов .html в директории src/views из коробки. Даже с вложенностью.

Вы можете использовать это для быстрого прототипирования без необходимости менять что-либо в конфигурации.

Вы даже можете расширить его с помощью синтаксиса PostHTML, такого как <include>, чтобы включать небольшие html-компоненты или использовать другие шаблонизаторы.

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

Vituum имеет предопределенную необязательную структуру для файлов вашего проекта. Вы всегда можете изменить структуру по своему вкусу через config.

  • 📁 public — место для статических файлов и файлов dist
  • 📁 src
    • 📁 assets — ваши статические файлы в виде .png, .svg
    • 📁 data — ваши данные .json, используемые в шаблонах
    • 📁 электронные письма — ваши шаблоны электронных писем
    • 📁 скрипты — ваши файлы скриптов в виде .js, .ts
    • 📁 стили — ваши файлы стилей .css, .scss
    • 📁 шаблоны — ваши файлы шаблонов в формате .twig, .latte
    • 📁 представления — ваши страницы как .html, вы также можете вложить и определить страницу как .json или .twig, .latte и др.

Импортирует

В ванильных css и js вы можете импортировать по одному файлу за раз. Глобусы типа *.css или *.js невозможны.

Чтобы помочь автоматически импортировать несколько файлов, Vituum использует внутренний плагин, который добавляет все импортируемые файлы в каталогах в один файл.

Это удобно, если у вас сложный проект с большим количеством стилей или файлов скриптов.

Вы можете узнать больше об этом на сайте vituum.dev

Электронные письма

Написание шаблонов электронной почты всегда было сложным делом. Vituum пытается облегчить вам эту задачу.

Вы можете добавить интеграцию @vituum/juice, а затем писать стили в PostCSS или любом другом препроцессоре. Все будет встроено в html через Juice.

Html можно написать с помощью любого шаблонизатора, включая PostHTML.

Вы даже можете протестировать отправку электронной почты с помощью команды vituum send.

Вы можете узнать больше об этом на сайте vituum.dev

Интеграции

Все модули могут быть добавлены по желанию с помощью Integrations API. Используя этот API, вы можете даже написать свою собственную команду и запустить ее через команду vituum my-command.

Среди наших интеграций есть и популярная TailwindCSS. Вы можете легко добавить его через vite.config.js, tailwind.config.cjs и начать использовать эту библиотеку в полной мере без сложной настройки.

Мы написали собственную интеграцию на Newlogic — @newlogic-digital/core с заранее подготовленным конфигом, интеграциями и расширениями для шаблонизаторов для легкого использования в наших проектах.

Вы можете узнать больше об интеграциях на vituum.dev

Нравится?

Vituum также отлично подходит в качестве генератора статических сайтов. Однако если вы ищете комплексное решение для создания исключительно статических страниц, мы рекомендуем попробовать Astro.

По всему проекту есть полная документация на vituum.dev, а также вы можете следить за ним в Twitter под ником @vituum_dev.

Если вы хотите поддержать проект, пожалуйста, дайте нам звезду на GitHub. А если вы действительно хотите оказать проекту большую поддержку, вы также можете стать нашим партнером и поддержать дальнейшее развитие финансово. В этом случае свяжитесь со мной по адресу lubomir.blazek@newlogic.cz, и ваш логотип может появиться на страницах проекта.

Кроме того, любая помощь в виде добавления проблем или запросов на исправление будет только приветствоваться!

Оцените статью
devanswers.ru
Добавить комментарий