Vite 使用插件

Vite 可以使用插件進行擴展，這得益于 Rollup 優(yōu)秀的插件接口設(shè)計和一部分 Vite 獨有的額外選項。這意味著 Vite 用戶可以利用 Rollup 插件的強大生態(tài)系統(tǒng)，同時根據(jù)需要也能夠擴展開發(fā)服務(wù)器和 SSR 功能。

添加一個插件

若要使用一個插件，需要將它添加到項目的 devDependencies 并在 vite.config.js 配置文件中的 plugins 數(shù)組中引入它。例如，要想為傳統(tǒng)瀏覽器提供支持，可以按下面這樣使用官方插件 @vitejs/plugin-legacy：

$ npm i -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?也可以接受包含多個插件作為單個元素的預(yù)設(shè)。這對于使用多個插件實現(xiàn)的復(fù)雜特性（如框架集成）很有用。該數(shù)組將在內(nèi)部被扁平化。

Falsy 虛值的插件將被忽略，可以用來輕松地啟用或停用插件。

強制插件排序

為了與某些 Rollup 插件兼容，可能需要強制執(zhí)行插件的順序，或者只在構(gòu)建時使用。這應(yīng)該是 Vite 插件的實現(xiàn)細節(jié)?？梢允褂?nbsp;?enforce ?修飾符來強制插件的位置:

• ?pre?：在 Vite 核心插件之前調(diào)用該插件
• 默認：在 Vite 核心插件之后調(diào)用該插件
• ?post?：在 Vite 構(gòu)建插件之后調(diào)用該插件

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

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

按需使用

默認情況下插件在開發(fā) (serve) 和生產(chǎn) (build) 模式中都會調(diào)用。如果插件在服務(wù)或構(gòu)建期間按需使用，請使用 apply 屬性指明它們僅在 'build' 或 'serve' 模式時調(diào)用：

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

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