Сборка для Production
Когда приходит время деплоить ваше приложение на прод, просто запустите команду vite build
. По умолчанию в сборке используется <root>/index.html
как точка входа (entry point) и создаёт application bundle, который подходит для размещения на статическом хостинг сервисе. Ознакомьтесь с руководством Деплой статического сайта, чтобы посмотреть как это происходит на популярных платформах.
Поддержка браузеров
Production сборка подразумевает поддержку для современного JavaScript. По умолчанию, Vite нацелен на браузеры, которые поддерживают нативный ESM скрипт тег и нативный ESM dynamic import. Как референс для Вас, Vite использует это browserslist:
defaults and supports es6-module and supports es6-module-dynamic-import, not opera > 0, not samsung > 0, not and_qq > 0
Вы можете указать кастомные браузеры через build.target
config option, где самая нижняя цель - es2015
.
Обратите внимание, по умолчанию, Bite обрабатывает только синтаксические трансформации и не добавляет полифилов по умолчанию. Вы можете ознакомиться с Polyfill.io - сервис, который автоматически генерирует сборку полифилов основываясь на пользовательской browser UserAgent строке.
Старые браузеры могут быть поддержаны с помощью @vitejs/plugin-legacy, который автоматически сгенерирует legacy chunks и соответствующие полифилы для ES фич. Legacy chunks загружаются по условию только в браузерах, которые не поддерживают нативный ESM.
Public Base Path
- Связанный раздел: Обработка ресурсов
Если вы деплоите ваш проект с вложенным public path, то просто укажите base
config option и все пути на asset будут преобразованы в соответствующие пути. Этот параметр может быть также указан, как флаг командной строки, например vite build --base=/my/public/path/
.
URL JS-импортированный ресурсов, CSS url()
ссылки и ссылки на assets в ваших .html
файлах все автоматически корректируются с учётом этого параметра во время сборки.
Исключение только когда вам нужно динамически сконкатенировать URL адреса на лету. В этом случае Вы можете использовать глобальную переменную import.
, которая будет являться public base путём. Заметьте, эта переменная статически заменяется во время сборки, поэтому она должна появляться в коде в таком виде как она есть (т.е. import.
не сработает).
Настройка сборки
Сборка может быть настроена через различные build config options. В частности, Вы можете прямо указать Rollup options через build.rollupOptions
:
// vite.config.js
module.exports = defineConfig({
build: {
rollupOptions: {
// https://rollupjs.org/guide/en/#big-list-of-options
}
}
})
Например, Вы можете указать множественный (multiple) Rollup output с плагинами, которые применяются только во время сборки.
Rebuild при изменении файлов
Вы можете активировать rollup watcher с помощью vite build --watch
. Или Вы можете напрямую указать WatcherOptions
через build.watch
:
// vite.config.js
module.exports = defineConfig({
build: {
watch: {
// https://rollupjs.org/guide/en/#watch-options
}
}
})
Multi-Page App (Многостраничное приложение)
Предположим, у Вас есть следующая структура проекта:
├── package.json
├── vite.config.js
├── index.html
├── main.js
└── nested
├── index.html
└── nested.js
Во время dev разработки, просто переходите на /nested/
- это работает как ожидается, так же как в обычном статическом файл-сервере.
Во время сборки (build), всё что Вам нужно сделать - это указать все .html
файлы как точки входа (entry points):
// vite.config.js
const { resolve } = require('path')
const { defineConfig } = require('vite')
module.exports = defineConfig({
build: {
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
nested: resolve(__dirname, 'nested/index.html')
}
}
}
})
Если вы указали другой рут (корневой каталог), помните что __dirname
всё ещё будет папкой вашего vite.config.js файла когда резолвятся input пути. Следовательно, Вам нужно будет добавить root
entry в аргументы для resolve
.
Library Mode
Когда Вы разрабатываете библиотеку для браузеров, Вы вероятно тратите большинство вашего времени на test/demo страницу, которая импортит саму вашу библиотеку. С Vite Вы можете использовать index.html
для этих целей, чтобы получить приятный development experience.
Когда пришло время собрать вашу библиотеку для её выката, используйте build.lib
config option. Убедитесь что вы экстернализировали (externalize, исключили), которые вы не хотите собирать в своей библиотеке, например vue
или react
:
// vite.config.js
const path = require('path')
const { defineConfig } = require('vite')
module.exports = defineConfig({
build: {
lib: {
entry: path.resolve(__dirname, 'lib/main.js'),
name: 'MyLib',
fileName: (format) => `my-lib.${format}.js`
},
rollupOptions: {
// убедитесь, что исключили библиотеки, которые не надо собирать
// в вашу библиотеку (library)
external: ['vue'],
output: {
// Предоставляем глобальные переменные, чтобы использовать их в UMD сборке
// для экстернализированных зависимостей
globals: {
vue: 'Vue'
}
}
}
}
})
Запуск vite build
с этим конфигом использует Rollup preset, который ориентирован на генерацию (предоставление) библиотек (libraries) и производит два формата: es
и umd
(настраиваются через build.lib
):
$ vite build
building for production...
[write] my-lib.es.js 0.08kb, brotli: 0.07kb
[write] my-lib.umd.js 0.30kb, brotli: 0.16kb
Рекомендуемый package.json
файл для вашей lib (библиотеки):
{
"name": "my-lib",
"files": ["dist"],
"main": "./dist/my-lib.umd.js",
"module": "./dist/my-lib.es.js",
"exports": {
".": {
"import": "./dist/my-lib.es.js",
"require": "./dist/my-lib.umd.js"
}
}
}