Skip to content
本页目录
给每一条河每一座山取一个温暖的名字,我有一所房子,面朝大海,春暖花开。

怎么写一个 Vite 插件

参考:Vite 官网
Vite 插件扩展了设计出色的 Rollup 接口,带有一些 Vite 独有的配置项。
插件的本质就是:合适的时间,调用合适的钩子,改点东西(增删改)。

举个例子

实现功能:
1、设置服务端口为:3456

js
// vite-plugin-demo.ts
import { Plugin } from "vite";

export default function viteDemo(): Plugin {
  return {
    name: "vite:demo",
    config(config) {
      return {
        server: {
          port: config.server?.port || 3456,
        },
      };
    },
    configResolved(resConfig) {
      console.log("vite-demo-resolved: ", resConfig.server);
    },
  };
}
// 用法 vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import viteDemoPlugin from "./src/plugins/vite-plugin-demo";

export default defineConfig({
  plugins: [vue(), viteDemoPlugin()],
  server: {
    port: 3062,
  },
});

命名约定

WARNING

对于 Vite 专属插件:

  • Vite 插件应该有一个带 vite-plugin- 前缀、语义清晰的名称。
  • 在 package.json 中包含 vite-plugin 关键字。
  • 在插件文档增加一部分关于为什么本插件是一个 Vite 专属插件的详细说明(如,本插件使用了 Vite 特有的插件钩子)。

如只适用于特定框架,应该:

  • vite-plugin-vue- 前缀作为 Vue 插件
  • vite-plugin-react- 前缀作为 React 插件
  • vite-plugin-svelte- 前缀作为 Svelte 插件

那些钩子

Vite 独有钩子

TIP

  • config 在解析 Vite 配置前调用。
  • configResolved 在解析 Vite 配置后调用。
  • configureServer 用于配置开发服务器。
  • transformIndexHtml 转换 index.html 的专用钩子。
  • handleHotUpdate 执行自定义 HMR 更新处理。

源于 Rollup 的通用钩子

TIP

  • 服务器启动时被调用:optionsbuildStart
  • 在每个传入模块请求时被调用:resolveIdloadtransform
  • 服务器关闭时被调用:buildEndcloseBundle
怎么写一个Vite插件 has loaded