Пример использования проектов на базе Vite.js для улучшения веб-проекта на Golang.
Go - отличный язык для написания веб-приложений, с его мощными библиотеками http и гибким языком шаблонов. Пакет html.Template позволяет достаточно легко добавлять JavaScript в ваши веб-сайты. Но если вы переборщите JavaScript , ваш сайт станет сложным для поддержки, а также сложным для других разработчиков, если им понадобится исправить или поддержать код, написанный вами.
Решением этой проблемы в течение долгого времени были фреймворки. Современные JS-фреймворки, такие как Angular, React, Vue и Svelte, помогают легко создавать большие одностраничные приложения.
Фреймворки приложений JavaScript обычно предварительно обрабатывают код и связанный CSS, компилируют , предварительно обрабатывают его, сворачивают , рендерят в файлы, что делаеет загрузку вашего сайта долгой. Если вы занимаетесь улучшением существующих страниц, вашего сайта может быть очень сложно определить, как называются все "разрозненные" файлы и в каком порядке их следует подключать к страницам. Если вы изучали некоторые из руководств по фреймовикам js, рассказывающих о том, как это сделать, вы поймете, что я имею в виду.
Я постараюсь не писать еще один такой учебник. Я постараюсьописать это простым языком для вашего понимаия. Vite.js - это относительно новый JavaScript конструктор приложений, разработанный Эваном Ю, создателем Vue.js, как более быстрая и понятная замена Vue CLI. Он не зависит от платформы и поддерживает не только Vue, но и различные варианты ReactJS и Svelte. Существует активное сообщество разработчиков, создающее плагины для использования с Vite, разработчики Ruby on Rails, Django (Python), Laravel и Wordpress (PHP) и других фреймворков и языков написали интеграции, чтобы упростить разработку на JavaScript с использованием моих любимых инструментов, и чтобы это "просто работало". Недавно я написал модуль для Go, который делает это для веб-приложений на Go: vite-go. Я собираюсь использовать его в качестве примера того, как можно использовать интеграцию как для быстрой разработки кода на JavaScript, так и для упаковки готового к кода в приложение.
Что упрощает интеграция
Интеграционные пакеты, такие как vite-go, обычно автоматизируют или упрощают, по крайней мере, следующие задачи:
- Подключение сервера разработки Vite к веб-страницам, используемые вашим приложением.
- Встраивание каталогов dist/, созданных Vite, в страницы сайта.
- Удобная работа со статическими файлми.
Vite-go выполняет все эти три задачи. В репозитории есть полный пример приложения, показывающий, как использовать все эти возможности.
Установка vite-go в ваше приложение Go
Чтобы использовать vite-go, сначала вам нужно:
go get github.com/torenware/vite-go
Далее Вам следует разместить свой JS-проект в каталоге в рабочей директории Go (здесь мы будем называть его "frontend"). Вы можете создать новый проект на основе Vite с помощью NPM из командной строки на MacOS или Linux с помощью команды
npm create vite@latest -y frontend -- --template vue
Команда в Windows будет аналогичной, но это упражнение для читателя.
Чтобы интегрировать поддержку загрузки приложения, необходимо создать объект glue, настроенный на тот тип поддержки, который вам нужен (т.е. поддержка разработки для загрузки файлов или поддержка для сборки готовых JavaScript-пакетов в приложении Go). Код будет выглядеть примерно так:
Чтобы внедрить glue в ваши шаблоны, сделайте в коде обработчика что-то подобное этому:
и что-то вроде этого в ваших шаблонах:
Поддержка сервера Dev
Использование Vite dev server довольно проста: вам просто нужно добавить ссылку скрипта на вашу веб-страницу, указывающую на dev server. Если мы работаем с приложением Vue 3, которое не использует Typescript, ссылка по умолчанию будет выглядеть следующим образом.
<script type="module" src="http://localhost:3000/src/main.js"></script>
vite-go сделает это за вас, добавив этот тег в ваши шаблоны.
Ресурсы приложения Go
Настроить файловый сервер для обработки JavaScript и CSS на веб-страницах не так уж сложно с помощью http.FileServer(), но vite-go делает это еще проще, синхронизируя конфигурацию с файловым сервером. Код очень прост, как только вы создали свой объект glue. Он также гарантирует, что файлы и скрытые каталоги станут недоступны через статический файловый сервер:
См. документацию о некоторых проблемных местах, поскольку некоторые маршрутизаторы требуют, чтобы вы обрабатывали "/src/*" вместо "/src/".
Развертывание готового кода
Работать с кодом гораздо проще с помощью интеграционного решения, такого как vite-go. Ключевым моментом здесь является настройка файла vite.config.js .Поместим его в каталог dist/ в удобное для Go место. Если файл main.go находится в каталоге cmd/web/, то файл vite.config.js (в нашем примере он должен находиться в каталоге "frontend") должен выглядеть примерно так:
Если вы используете конфигурацию production, описанную выше, это не вызовет ошибок. Glue анализирует файл manifest.json, помещенный в каталог dist/ кодом конструктора Vite, и генерирует (многочисленные) необходимые теги на веб-страницах сайта. Это устранит мнножеество подвержено ошибок, в отличие от попытки сделать это вручную.
Независимо от платформы для ваших веб-приложений, использование такой интеграционной библиотеки, как vite-go, облегчит вам процесс создания сайтов.