Vite 使用插件

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

添加一個插件

若要使用一個插件，需要將它添加到項目的 devDependencies 并在 vite.config.js 配置文件中的 plugins 數組中引入它。例如，要想為傳統(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?也可以接受包含多個插件作為單個元素的預設。這對于使用多個插件實現的復雜特性（如框架集成）很有用。該數組將在內部被扁平化。

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

強制插件排序

為了與某些 Rollup 插件兼容，可能需要強制執(zhí)行插件的順序，或者只在構建時使用。這應該是 Vite 插件的實現細節(jié)?？梢允褂?nbsp;?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'
    }
  ]
})

按需使用

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

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

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