create-vite-template-js

v1.0.6

Published

2 months ago

Быстрый старт верстки на Vite + HTML + JS

0High
0Medium
0Low

atrocityz

starter frontend html scss vite create cli

Шаблон для быстрого старта верстки на HTML + JS + Vite

HTML, SCSS, PostCSS, JS, Prettier, Eslint, Commitlint, Husky, Vite

Версии сборки

Начало работы

npx create-vite-template-js

Первые шаги в использовании

Настроить конфигурацию eslint, prettier, stylelint под себя, если это требуется;
Удалить ненужные файлы из папок public, images, fonts, scripts, styles/blocks;
Скачать используемые в проекте шрифты и конвертировать их в woff2 формат;
Локально подключить шрифты в fonts.scss и в html-файле страницы для preload;
Задать ширину контейнера для desktop и laptop версий в constants.scss;
Определить базовые переменные для проекта в variables.scss;
Задать focus-visible и disabled эффекты, которые реализованы в миксине с этими же названиями в mixins.scss;

Структура папок и файлов

├── .github/workflows                    # Папка с инструкциями для github actions по деплою проекта
│ └── static.yml
├── .husky/                              # Папка с инструкциями для husky перед созданием коммита (только в версии с углубленной работой с Git)
│ ├── commit-msg                         # Проверка сообщения коммита
│ └── pre-commit                         # Выполнение проверки кода
├── public/                              # Папка для хранения файлов, которые попадут в build версию без изменений
│ └── (favicon, видеофайлы и т.п.)
├── src/                                 # Папка с исходниками разработки
│ ├── fonts/                             # Папка для хранения шрифтов
│ │ └── (*.woff2)
│ ├── icons/                             # Папка для хранения иконок в svg формате для svg спрайта
│ │ └── (*.svg)
│ ├── images/                            # Папка для хранения картинок различных форматов, которые будут оптимизированы
│ │ └── (*.{png,webp,jpeg,jpg,gif})
│ ├── partials/                          # Папка для хранения частей html файлов, которые можно будет использовать в файле страницы
│ │ └── (*.html)
│ ├── scripts/                           # Папка для хранения скриптов
│ │ └── (*.js)
│ ├── styles/                            # Папка для хранения стилей
│ │ ├── blocks/                          # Папка со стилями блоков/элементов
│ │ │ └── (*.scss)
│ │ ├── helpers/                         # Папка с вспомогательными инструментами
│ │ │ ├── constants.scss                 # Различные константы
│ │ │ ├── functions.scss                 # Реализованные функции
│ │ │ ├── index.scss                     # Подключение вспомогательных инструментов в один файл
│ │ │ ├── media.scss                     # Миксины с подготовленными медиа-запросами
│ │ │ └── mixins.scss                    # Часто используемая логика в миксинах
│ │ ├── fonts.scss                       # Локальное подключение шрифтов
│ │ ├── globals.scss                     # Глобальные стили
│ │ ├── index.js                         # Подключение всех стилей
│ │ ├── utils.scss                       # Утилитарные стили
│ │ ├── variables.scss                   # CSS переменные
│ │ └── vendors.scss                     # Подключение библиотек
│ ├── about.html                         # Страница "About" (как пример для создания многостраничного сайта)
│ ├── index.html                         # Основная страница сайта
│ └── main.js                            # Подключение стилей и скриптов
├── .gitignore                           # Список игнорируемых файлов и папок для git
├── commitlint.config.js                 # Конфигурация для commitlint (только в версии с углубленной работой с Git)
├── eslint.config.js                     # Конфигурация для eslint
├── jsconfig.json                        # Конфигурация для js
├── package.json                         # Основной файл с конфигурацией пакетного менеджера
├── package-lock.json                    # Список определенных версий зависимостей для пакетного менеджера
├── postcss.config.js                    # Конфигурация postcss
├── prettier.config.js                   # Конфигурация для prettier
├── README.md                            # Документация шаблона
├── stylelint.config.js                  # Конфигурация для stylelint
└── vite.config.js                       # Конфигурация для vite

Работа со стилями

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

Для нормализации стилей используется библиотека от Александра Ламкова - @a1rth/css-normalize. У него на канале есть видео с разбором этой библиотеки, советую посмотреть, так как она не просто обнуляет стили.

Если нужно стилизовать блок/элемент:

Создаем для него файл в папке blocks и пишем нужные нам стили;
Подключаем наш файл со стилями в index.js, который находится в папке styles;

Все сторонние стили (стили библиотек и т.п.) подключаются в vendors.scss.

Название для scss-файлов не нужно начинать со знака подчеркивания "_".

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

В миксинах и медиа-запросах нет ничего удивительного, но вот к функциям стоит присмотреться, ведь они сильно упрощают создание адаптивных интерфейсов. Эти функции fluid() и fluid-to-laptop() конвертируют переданные два значения min и max в использование функции clamp(), разница только в конечной точке, для fluid() это $minViewportWidth (можно поменять значение в описании функции), а для fluid-to-laptop() это значение константы $container-laptop-width.

При использовании команды npm run build, на выходе получается минифицированный и отполированный с помощью постпроцессора postcss (плагинов postcss-preset-env и postcss-pxtorem) css-файл.

Работа с HTML

Для создания html-файла страницы используйте корневую папку разработки - src, а для создания часто используемых и одинаковых частей html-кода используйте папку partials.

Многие процессы работы с html-файлами автоматизированы при помощи плагинов для vite:

Плагин vite-plugin-html-inject, позволяет разделять html-код на части, вынося одинаковые элементы в отдельные файлы и подключая их в нужных местах.

<load src="./partials/название-файла.html" />

ВАЖНО: В этих частях html-кода следует использовать пути относительно текущего файла, в котором подключена часть html-кода (например при использовании img в атрибуте src).

Плагин @spiriit/vite-plugin-svg-spritemap, позволяет легко и удобно работать с svg иконками из папки icons как с svg спрайтом.

<svg>
  <use xlink:href="./sprite#название-иконки"></use>
</svg>

Если иконка не подгружается, попробуйте перезапустить сборку и перезагрузить страницу с очисткой кэша.

Плагин vite-plugin-html-img-to-picture, позволяет автоматически в build версии проекта преобразовывать использование html-тега img в picture вместе с конвертацией изображения в современные форматы и его оптимизацией. Плагин обрабатывает только использование изображений из директории /src/images/ и только изображения форматов jpg, jpeg или png.

<!-- Изображение изначально загружено в 2x размере (например, 300x300) -->
<img src="./images/название-изображения.png" alt="" />

будет преобразовано в:

<picture>
  <source
    type="image/avif"
    srcset="
      /assets/images/название-изображения.avif,
      /assets/images/название-изображения@2x.avif 2x
    "
    sizes="(min-width: 150px) 150px, 100vw"
  />
  <source
    type="image/webp"
    srcset="
      /assets/images/название-изображения.webp,
      /assets/images/название-изображения@2x.webp 2x
    "
    sizes="(min-width: 150px) 150px, 100vw"
  />
  <img
    src="/assets/images/название-изображения.png"
    srcset="
      /assets/images/название-изображения.png,
      /assets/images/название-изображения@2x.png 2x
    "
    sizes="(min-width: 150px) 150px, 100vw"
    decoding="async"
    loading="lazy"
    width="150"
    height="150"
    alt=""
  />
</picture>

ВАЖНО: Изображение, которое будет конвертироваться плагином следует изначально загружать в 2x формате (если установлен параметр isRetinaSupport: true для плагина, по умолчанию так и есть), подробнее в документации плагина.

Работа с JavaScript

Вся работа с JavaScript ведется в папке scripts. А для подключения js модулей используйте файл index.js, находящийся в этой же папке.

Чистый код

Для поддержки чистоты кода по-максимуму используются линтеры:

Prettier - для форматирования всего кода (советую включить форматирование кода при сохранении файла);
Stylelint - для проверки кода стилей на следование правилам, прописанным в конфигурационном файле, включая расположение свойств;
Eslint - для проверки JavaScript кода на следование правилам, прописанным в конфигурационном файле;

Углубленная работа с Git и GitHub

Для GitHub используется GitHub Actions, который позволяет автоматически деплоить build версию проекта, после отправки изменений на GitHub.

Для Git (только для версии с git) - Husky, Lint-staged и Commitlint. Все эти инструменты в связке позволяют автоматически проверять название коммита и код перед его созданием.

История изменений

1.0.6

Обновлены практически все npm пакеты до последних версий
Добавлены базовые сниппеты для использования иконок как svg спрайт и для подключения html части через тэг load
Исправлены stylelint ошибки в файле mixins.scss

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme