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

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

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

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

$ npm add -D @vitejs/plugin-legacy

// vite.config.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. Совместимые плагины Rollup смотрите в разделе Плагины Vite Rollup со списком совместимых официальных плагинов Rollup с инструкциями по использованию или в разделе совместимости плагинов Rollup, если он там не указан.

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

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

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

• pre: вызывать плагин перед основными плагинами Vite
• default: вызывать плагин после основных плагинов Vite
• post: вызывать плагин после плагинов сборки Vite

// vite.config.js
import image from '@rollup/plugin-image'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    {
      ...image(),
      enforce: 'pre',
    },
  ],
})

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

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

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

// vite.config.js
import typescript2 from 'rollup-plugin-typescript2'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    {
      ...typescript2(),
      apply: 'build',
    },
  ],
})

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

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