項(xiàng)目使用vite構(gòu)建打包時(shí), 可以方便的拓展自定義的能力, 其中一個(gè)就是插件機(jī)制, 插件的使用幾乎在所有的vite項(xiàng)目中都會(huì)使用到. 例如我們使用 vite 來(lái)創(chuàng)建一個(gè)簡(jiǎn)單的 react 工程

npm init vite@latest

創(chuàng)建完成后, 打開(kāi) vite.config.ts 文件后我們看到其中就使用了 @vitejs/plugin-react 插件

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

在學(xué)習(xí)了 Vite 的插件機(jī)制后，我們接下來(lái)利用已掌握的Vite插件開(kāi)發(fā)的基本知識(shí)來(lái)實(shí)戰(zhàn)Vite插件的開(kāi)發(fā)工作。

最簡(jiǎn)單的插件

Vite 插件與 Rollup 插件結(jié)構(gòu)類(lèi)似，為一個(gè)name和各種插件 Hook 的對(duì)象：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// 一個(gè)最簡(jiǎn)單的插件
const myPlugin = {
  name: 'vite-plugin-xxx',
  load(filepath) {
    console.log('load', filepath)
  }
}

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), myPlugin],
})

vitejs官方提供的插件都是發(fā)布在 vite 命名空間下,以 @vitejs/plugin- 開(kāi)頭的.
如果要開(kāi)發(fā)一個(gè)我們自己的vite插件,建議命名以vite-plugin-開(kāi)頭。通常為了插件的靈活性,要考慮外部傳參，我們不會(huì)直接寫(xiě)一個(gè)對(duì)象，而是實(shí)現(xiàn)一個(gè)返回插件對(duì)象的工廠(chǎng)函數(shù)，如下代碼所示：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

function myPlugin(options) {
  console.log(options)
  return {
    name: 'vite-plugin-xxx',
    load(filepath) {
      // 這里可以訪(fǎng)問(wèn)外部傳入進(jìn)來(lái)的配置參數(shù)
      console.log(options, filepath)
    }
  }
}

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), myPlugin({})],
});