使用外掛

Vite 可以使用外掛進行擴展，這些外掛基於 Rollup 設計良好的外掛介面，並帶有一些額外的 Vite 特定選項。這表示 Vite 使用者可以依賴 Rollup 外掛的成熟生態系統，同時也可以根據需要擴展開發伺服器和 SSR 功能。

新增外掛

要使用外掛，需要將其新增至專案的 devDependencies，並包含在 vite.config.js 設定檔的 plugins 陣列中。例如，為了提供對舊版瀏覽器的支援，可以使用官方的 @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 的目標是為常見的 Web 開發模式提供開箱即用的支援。在搜尋 Vite 或相容的 Rollup 外掛之前，請查看功能指南。在 Rollup 專案中需要外掛的許多情況，Vite 中已經涵蓋。

請查看外掛區段以了解有關官方外掛的資訊。社群外掛列在awesome-vite 中。

您也可以使用 npm 搜尋 vite-plugin 來尋找符合建議慣例的 Vite 外掛，或使用 npm 搜尋 rollup-plugin 來尋找 Rollup 外掛。

強制外掛排序

為了與某些 Rollup 外掛相容，可能需要強制外掛的順序，或僅在建置時應用。這應該是 Vite 外掛的實作細節。您可以使用 enforce 修飾符來強制外掛的位置

• pre：在 Vite 核心外掛之前調用外掛
• 預設值：在 Vite 核心外掛之後調用外掛
• post：在 Vite 建置外掛之後調用外掛

vite.config.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

import typescript2 from 'rollup-plugin-typescript2'
import { defineConfig } from 'vite'

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

建置外掛

請查看外掛 API 指南以了解有關建立外掛的文件。