Skip to content

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

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

Добавление плагина

Чтобы использовать плагин, его необходимо добавить в devDependencies проекта и включить в массив plugins в конфигурационном файле vite.config.js. Например, для обеспечения поддержки устаревших браузеров можно использовать официальный @vitejs/plugin-legacy:

$ npm add -D @vitejs/plugin-legacy
vite.config.js
js
import 
legacy
from '@vitejs/plugin-legacy'
import {
defineConfig
} from 'vite'
export default
defineConfig
({
plugins
: [
legacy
({
targets
: ['defaults', 'not IE 11'],
}), ], })

plugins также принимают пресеты, включающие несколько плагинов, как один элемент. Это полезно для сложных функций (таких как интеграция с фреймворком), которые реализуются с помощью нескольких плагинов. Массив будет сплющен внутри.

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

Поиск плагинов

ПРИМЕЧАНИЕ

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

Ознакомьтесь с разделом Плагины для получения информации об официальных плагинах. Плагины сообщества перечислены в awesome-vite.

Вы также можете найти плагины, соответствующие рекомендуемым соглашениям используя npm поиск для vite-plugin для плагинов Vite или npm поиск для rollup-plugin для плагинов Rollup.

Принудительный порядок плагинов

Для совместимости с некоторыми подключаемыми модулями Rollup может потребоваться обеспечить соблюдение порядка подключаемых модулей или применять их только во время сборки. Это должна быть деталь реализации для плагинов Vite. Вы можете принудительно установить положение плагина с помощью модификатора enforce modifier:

  • pre: вызывать плагин перед основными плагинами Vite
  • default: вызывать плагин после основных плагинов Vite
  • post: вызывать плагин после плагинов сборки Vite
vite.config.js
js
import 
image
from '@rollup/plugin-image'
import {
defineConfig
} from 'vite'
export default
defineConfig
({
plugins
: [
{ ...
image
(),
enforce
: 'pre',
}, ], })

Подробную информацию можно найти в Руководстве по API плагинов.

Условное применение

По умолчанию плагины вызываются как для обслуживания, так и для сборки. В тех случаях, когда плагин необходимо условно применить только во время подачи или сборки, используйте свойство apply, чтобы вызывать их только во время 'build' или 'serve':

vite.config.js
js
import 
typescript2
from 'rollup-plugin-typescript2'
import {
defineConfig
} from 'vite'
export default
defineConfig
({
plugins
: [
{ ...
typescript2
(),
apply
: 'build',
}, ], })

Создание плагинов

Ознакомьтесь с Руководством по API плагинов для получения документации по созданию плагинов.

Выпущено под лицензией MIT. (dev)