Skip to main content

Vite

Vite - это современный сборщик модулей (bundler) для JavaScript-приложений, менее кастомизируемый, чем Webpack, но гораздо более быстрый.

Создание шаблона

yarn create vite [project-name] --template [template-name]
  • [project-name] - название проекта
  • [template-name] - используемый шаблон

Пример

yarn create vite react-webrtc --template react

SASS

yarn add -D sass

Плагины

Установка

yarn add -D @vitejs/plugin-react

Использование

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()]
})

Пользовательские плагины, которые показались мне интересными

Статические файлы

Ссылки на файлы, находящиеся в директории public, должны начинаться с /. Предположим, что мы сохраняем аватары пользователей в директории public/uploads/avatars. Названием соответствующего файла является идентификатор пользователя + расширение файла. Тогда ссылка на файл 1.png будет следующей:

<img src='/uploads/avatars/1.png' alt='User Name' />

Деплой статического сайта

Сборка и локальное тестирование приложения

yarn build
yarn preview

GitHub Pages

Предположим, что мы деплоим на https://[username].github.io/. В корневой директории проекта создаем файл deploy.sh следующего содержания:

#!/usr/bin/env sh

# прерываем выполнение при наличии ошибок
set -e

# сборка
npm run build

# переходим в директорию со сборкой
cd dist

# если используем кастомный домен
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

git push -f git@github.com:[username]/[username].github.io.git main

cd -

Netlify

Создаем новый проект из GitHub со следующими настройками:

  • Build Command: vite build или npm run build
  • Publish directory: dist

Heroku

Авторизуемся в Heroku с помощью heroku login. В корневой директории проекта создаем файл static.json следующего содержания:

{
  "root": "./dist"
}

Выполняем серию команд:

# изменение версии
$ git init
$ git add .
$ git commit -m "My site ready for deployment."

# создаем новое приложение с указанным названием
$ heroku apps:create example

# устанавливаем buildpack для статических сайтов
$ heroku buildpacks:set https://github.com/heroku/heroku-buildpack-static.git

# публикуем сайт
$ git push heroku main

#  открываем браузер
$ heroku open

Переменные среды окружения и режимы

Vite загружает переменные среды окружения в объект import.meta.env из файлов .env, env.local, env.[mode] и др. Открытыми являются переменные, начинающиеся с VITE_, например:

PASSWORD=qwerty
VITE_SOME_KEY=some-public-value

В данном случае в клиентский код попадет только VITE_SOME_KEY.

Предопределенные переменные:

  • import.meta.env.MODE: 'development' | 'production' - режим, в котором запущено приложение;
  • import.meta.BASE_URL: string - основной путь приложения (определяется настройкой base);
  • import.meta.env.PROD: boolean;
  • import.meta.env.DEV: boolean.

Настройки

Пример синонимов путей для React-приложения

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    }
  }
})