Appearance
怎么写一个 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
- 服务器启动时被调用:
options、buildStart - 在每个传入模块请求时被调用:
resolveId、load、transform - 服务器关闭时被调用:
buildEnd、closeBundle