Vite 使用插件

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

添加一個(gè)插件

若要使用一個(gè)插件，需要將它添加到項(xiàng)目的 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?也可以接受包含多個(gè)插件作為單個(gè)元素的預(yù)設(shè)。這對(duì)于使用多個(gè)插件實(shí)現(xiàn)的復(fù)雜特性（如框架集成）很有用。該數(shù)組將在內(nèi)部被扁平化。

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

強(qiáng)制插件排序

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

• ?pre?：在 Vite 核心插件之前調(diào)用該插件
• 默認(rèn)：在 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'
    }
  ]
})

按需使用

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

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

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