vite原理：插件机制

为什么要理解插件机制

Vite 的扩展能力几乎都在插件上。
理解插件机制，基本就理解了 Vite 如何“改造源码、接管构建、扩展能力”。

Vite 插件的两层来源

• Vite 自己的插件体系（开发服务器相关钩子）
• Rollup 插件体系（构建阶段钩子）

Vite 对 Rollup 插件高度兼容，这就是它生态扩展快的核心原因之一。

插件执行的大致时机

• config：读取并修改用户配置
• configResolved：最终配置确定后触发
• configureServer：拿到 dev server，做中间件扩展
• transform：转换模块源码（最常用）
• handleHotUpdate：自定义 HMR 行为

一个最小插件示例

function demoPlugin() {
  return {
    name: "demo-plugin",
    transform(code, id) {
      if (id.endsWith(".js")) {
        return code.replace("__APP_NAME__", "my-vite-app");
      }
      return code;
    },
  };
}

export default demoPlugin;

vite.config.js

import { defineConfig } from "vite";
import demoPlugin from "./plugins/demo-plugin";

export default defineConfig({
  plugins: [demoPlugin()],
});

插件顺序与 enforce

可以通过 enforce 控制执行顺序：

• enforce: "pre"：前置
• 默认：中间
• enforce: "post"：后置

当多个插件都改同一份源码时，顺序非常关键。

生产与开发的差异

有些钩子只在开发阶段有意义（例如 configureServer），
有些钩子在 build 阶段影响更大（例如 Rollup output 相关处理）。

小结

Vite 插件机制本质是「统一的扩展流水线」：
你可以在配置、开发服务器、模块转换、构建输出多个节点介入，这也是 Vite 工程化能力的根基。