Учебник по Vite

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

Vite состоит из двух частей:

  • Сервер разработки:Основан на нативных ES-модулях, обеспечивает сверхбыстрые горячие обновления.

  • Команда сборки:Использует Rollup для сборки кода и создания оптимизированных статических ресурсов, подходящих для продакшена.

Vite требует Node.js версии 18+ или 20+. Однако некоторым шаблонам для корректной работы требуется более высокая версия Node. Когда ваш менеджер пакетов выдаёт предупреждение, обновите версию Node.

Проблемы традиционных инструментов сборки

До Vite во фронтенд-разработке обычно использовались инструменты сборки вроде Webpack. Хотя эти инструменты мощные, у них есть некоторые проблемы:

  • Медленный запуск:Чем больше проект, тем дольше время запуска, что влияет на эффективность разработки.

  • Медленные горячие обновления:При каждом изменении кода приходится пересобирать весь проект, из-за чего горячие обновления происходят медленно.

  • Сложная конфигурация:У таких инструментов, как Webpack, сложная конфигурация и высокий порог входа.

Появление Vite решает проблемы традиционных инструментов сборки и даёт следующие преимущества:

  • Сверхбыстрый запуск:Благодаря нативной поддержке ES-модулей в браузере не требуется сборка в бандл, и запуск происходит чрезвычайно быстро.

  • Быстрые горячие обновления:Обновляются только изменённые модули, сохраняется состояние приложения и повышается эффективность разработки.

  • Богатые возможности:Поддерживает TypeScript, JSX, CSS и т. д. из коробки.

  • Высокая расширяемость:Позволяет легко интегрировать другие инструменты и фреймворки через систему плагинов.

Как работает Vite

Работу Vite можно разделить на режим разработки и режим production:

  • Режим разработки:

    • Vite запускает сервер разработки и напрямую загружает исходный код, используя встроенную поддержку ES-модулей браузером.

    • При изменении кода Vite обновляет только изменённые модули и уведомляет браузер о необходимости выполнить горячее обновление, сохраняя состояние приложения.

  • Режим production:

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

    • Эти файлы можно развернуть на любом сервере статических файлов.

Сценарии применения Vite

Vite подходит для различных проектов, особенно:

  • Одностраничные приложения (SPA):Например, проекты на Vue, React.

  • Статические сайты:Быстрое создание блогов, документации и т. д.

  • Разработка библиотек:Используйте возможности сборки Vite для эффективной разработки и сборки библиотек.

Создание проекта Vite

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

Откройте терминал или инструмент командной строки и выполните следующую команду, чтобы создать новый проект Vite:

npm create vite@latest

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

Vite предоставляет несколько шаблонов, включая:

  • vanilla:Проект на чистом JavaScript

  • vue:Проект Vue.js

  • react:Проект React

  • preact:Проект Preact

  • lit:Проект Lit

  • svelte:Проект Svelte

После выбора шаблона Vite автоматически создаст каталог проекта и установит зависимости. В этой главе мы выбрали фреймворк Vue.

Если вы пока не знаете, что выбрать, можно просто нажимать Enter до конца. Выводимая в окне информация будет похожа на следующую:

Проект, созданный с помощью Vite, обычно содержит следующие файлы и папки:

  • node_modules:Папка для хранения зависимостей проекта.

  • public:Папка для хранения статических ресурсов, таких как изображения, шрифты и т. д.

  • src:Папка для хранения исходного кода проекта.

    • main.js:Входной файл проекта.

    • App.vue:Корневой компонент проекта Vue.

  • index.html:Главная страница проекта.

  • package.json:Файл конфигурации проекта, содержащий информацию о проекте, зависимости и команды скриптов.

  • vite.config.js:Файл конфигурации Vite, используемый для настройки различных параметров Vite.

Запустите сервер разработки

Перейдите в каталог проекта:

cd example-vite-test

Установите зависимости:

npm install
Выполните следующую команду, чтобы запустить сервер разработки:

npm run dev

После выполнения появляется следующая информация:

VITE v6.2.0  ready in 684 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Option(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
  ➜  press h + enter to show help

Vite запустит локальный сервер разработки и выведет адрес доступа, напримерhttp://localhost:5173, порт можно настроить и изменить в vite.config.js.

Откройте браузер и перейдите по адресу, чтобы увидеть ваш проект Vite.

Измените код и просмотрите результат

Откройте файл src/App.vue, измените код и сохраните файл.

Вы увидите, что браузер автоматически обновляется и отображает изменённый результат.

Процесс запуска Vite

Определено в package.json:

"scripts": {
  "dev": "vite"
}

Выполнитеnpm run dev. После этой команды npm найдёт локальный исполняемый файл node_modules/.bin/vite, вызовет этот файл и запустит сервер разработки.

Основные шаги процесса запуска Vite:

  1. Чтение конфигурации

    • По умолчанию считывается из корневого каталогаvite.config.jsилиvite.config.ts。
    • Конфигурация включаетroot、aliasплагины, порт и т. д.

  2. Разрешить зависимости

    • Сканированиеsrc/main.js(илиsrc/main.ts) в качестве входного файла.
    • Выполнить анализ зависимостей ES-модулей.
    • Для путей импорта (таких как@/components/Hello.vue) выполнить разрешение псевдонимов.

  3. Запустите сервер разработки

    • Создать HTTP-сервер, порт по умолчанию5173。
    • Обеспечить возможность горячей замены модулей (HMR).
    • Преобразовать файлы Vue, JS/TS, CSS и т. д. в понятный браузеру код с помощью встроенных плагинов Vite.

Порядок вызова файлов (на примере типичного проекта Vue 3)

npm run dev
    ↓
vite 命令执行
    ↓
读取 vite.config.js
    ↓
扫描入口文件 src/main.js / src/main.ts
    ↓
main.js 导入 App.vue 和 router/store 等
    ↓
App.vue -> template + script + style 分别由 Vite Vue 插件处理
    ↓
浏览器请求资源时，Vite 进行按需编译和模块缓存
    ↓
页面呈现，支持 HMR 热更新

Ключевые моменты

  • Файл точки входа：main.jsилиmain.ts, отправная точка приложения Vue.
  • Разрешение модулей: Vite используетesbuildчтобы быстро обрабатывать JS/TS и обрабатывать однофайловые компоненты Vue.
  • Разрешение псевдонимов：@Соответствуетsrc/, вvite.config.jsс помощьюresolve.aliasнастроено.
  • Горячие обновления: При изменении.vueфайлов или JS/TS файлов, Vite будет локально обновлять модули без перезагрузки всей страницы.

Общие возможности Vite

Vite предоставляет широкие возможности, которые помогают более эффективно разрабатывать фронтенд-приложения.

1. Использование CSS-препроцессоров

Vite поддерживает CSS-препроцессоры, такие как Sass, Less и Stylus.

Чтобы использовать эти препроцессоры, сначала нужно установить соответствующие зависимости:

Sass:

npm install -D sass

Less:

npm install -D less

Stylus:

npm install -D stylus

После установки вы можете использовать соответствующий CSS-препроцессор в вашем проекте.

Например, в проекте Vue можно использовать<style lang="scss">для написания кода на Sass.

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

Vite поддерживает написание кода на TypeScript.

Чтобы использовать TypeScript, сначала нужно установить TypeScript:

npm install -D typescript

После установки вы можете переименовать файлы .js в файлы .ts и писать код с использованием синтаксиса TypeScript.

Vite автоматически компилирует код TypeScript.

3. Использование статических ресурсов

Vite поддерживает использование статических ресурсов, таких как изображения, шрифты и т. д.

Мы можем разместить эти ресурсы в каталоге public или использовать инструкции import для импорта ресурсов.

Как использовать публичную директорию?

Поместите изображение logo.png в публичную директорию, затем ссылайтесь на изображение, используя /logo.png в вашем коде.

4. Использование инструкций import

Пример

import logo from './assets/logo.png'

const img = document.createElement('img')
img.src = logo
document.body.appendChild(img)

5. Использование переменных окружения

Vite поддерживает использование переменных окружения для настройки различных окружений.

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

Создайте файл .env:

VITE_API_URL=https://api.example.com

Используйте переменные окружения в коде:

const apiUrl = import.meta.env.VITE_API_URL

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

У Vite богатая экосистема плагинов, которая может помочь вам расширить функциональность Vite.

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

Установите плагин:

npm install -D vite-plugin-xxx

Настройте плагин:

Настройте плагин в файле vite.config.js:

import xxx from 'vite-plugin-xxx'

export default {
  plugins: [
    xxx()
  ]
}

vite.config.js — это основной файл конфигурации проекта Vite. Настраивая vite.config.js, вы можете настраивать различные аспекты поведения Vite, такие как сервер разработки, параметры сборки, плагины и т. д.

Ниже приведён пример конфигурации vite.config.js:

Описание конфигурации vite.config.js

// Импорт функции defineConfig для определения конфигурации Vite
import { defineConfig } from 'vite';
// Импорт плагина Vue для поддержки проектов Vue
import vue from '@vitejs/plugin-vue';
// Импорт модуля path для обработки путей
import path from 'path';

// Используйте defineConfig для определения конфигурации Vite
export default defineConfig({
  // Корневой каталог проекта, по умолчанию равен текущему рабочему каталогу
  root: path.resolve(__dirname, './src'),

  // Базовый путь, используется при развёртывании по подпути
  base: '/my-app/',

  // Конфигурация сервера разработки
  server: {
    // Укажите порт сервера разработки
    port: 3000,
    // Следует ли автоматически открывать браузер
    open: true,
    // Настройте прокси-сервер для решения проблем с кросс-доменными запросами
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // Адрес целевого сервера
        changeOrigin: true, // Изменять ли origin запроса
        rewrite: (path) => path.replace(/^\/api/, ''), // Переписать путь запроса
      },
    },
  },

  // Конфигурация сборки
  build: {
    // Укажите каталог вывода
    outDir: path.resolve(__dirname, '../dist'),
    // Укажите каталог статических ресурсов
    assetsDir: 'static',
    // Генерировать ли файлы sourcemap
    sourcemap: true,
    // Минифицировать ли код
    minify: 'terser', // Использовать terser для минификации кода
    // Настроить параметры Rollup
    rollupOptions: {
      // Настроить внешние зависимости
      external: ['lodash'],
      // Настроить формат вывода
      output: {
        manualChunks: {
          // Собрать lodash отдельно
          lodash: ['lodash'],
        },
      },
    },
  },

  // Конфигурация плагина
  plugins: [
    // Использовать плагин Vue
    vue(),
  ],

  // Конфигурация разрешения модулей
  resolve: {
    // Настроить псевдонимы путей
    alias: {
      '@': path.resolve(__dirname, './src'), // Сопоставить @ с каталогом src
    },
  },

  // Конфигурация CSS
  css: {
    // Настройка параметров CSS-препроцессора
    preprocessorOptions: {
      scss: {
        // Глобальное внедрение переменных SCSS
        additionalData: `@import "@/styles/variables.scss";`,
      },
    },
  },

  // Конфигурация переменных окружения
  envPrefix: 'VITE_', // Префикс переменных окружения, по умолчанию VITE_
});

  1. root
    Задает корневой каталог проекта, по умолчанию используется текущий рабочий каталог. Здесь он установлен на./src, что означает, что исходный код проекта размещается вsrcкаталог.

  2. base
    Задает базовый путь проекта, подходит, когда проект развернут по подпути. Например, если проект развернут по адресуhttps://example.com/my-app/, то установить его в/my-app/。

  3. server
    Конфигурация сервера разработки:

    • port: Укажите номер порта сервера разработки.

    • open: Автоматически ли открывать браузер при запуске сервера разработки.

    • proxy: Настройте прокси-сервер для решения проблем с кросс-доменными запросами. Например, проксировать запросы, начинающиеся с/apiвhttp://localhost:8080。

  4. build
    Конфигурация сборки:

    • outDir: Укажите каталог для выходных данных сборки.

    • assetsDir: Укажите каталог хранения статических ресурсов (например, изображений, шрифтов).

    • sourcemap: Генерировать ли файлы sourcemap для отладки.

    • minify: Минифицировать ли код,terser— это инструмент минификации по умолчанию.

    • rollupOptions: Настройте параметры сборки Rollup, такие как внешние зависимости и разделение кода.

  5. plugins
    Настройте плагины Vite. Здесь@vitejs/plugin-vueплагин используется для поддержки проектов Vue.

  6. resolve.alias
    Настройте псевдонимы путей. Например, сопоставьте@вsrcкаталог для удобного обращения в коде.

  7. css.preprocessorOptions
    Настройте параметры CSS-препроцессора. Например, глобально внедряйте SCSS-файлы переменных.

  8. envPrefix
    Настройте префикс переменных окружения. По умолчанию Vite загружает только переменные окружения, начинающиеся сVITE_префикс.

Другие расширения