JavaScript Vite 构建中怎么编写和使用自定义插件-js教程-PHP中文网

Vite插件本质是含name和钩子函数的对象，如transform处理代码、configureServer配置开发服务器；需在vite.config.js的plugins数组中引入调用，注意钩子执行时机与性能优化。

javascript vite 构建中怎么编写和使用自定义插件

编写和使用自定义 Vite 插件其实不难，核心是理解它是一个带钩子函数的对象，按需在构建或开发流程的关键节点“插入逻辑”。不需要复杂配置，写对钩子、导出正确结构，就能生效。

插件怎么写：一个最小可用结构

插件本质就是一个函数，返回含 name 和至少一个钩子的对象。例如：

用 transform 修改 JS 内容（比如替换占位符）
用 configureServer 启动时打印提示或加中间件
用 resolveId 拦截导入路径，支持虚拟模块

示例（纯 JS）：

export default function myPlugin() {
  return {
    name: 'my-plugin',
    transform(code, id) {
      if (id.endsWith('.js')) {
        return code.replace(/__VERSION__/g, '1.0.0');
      }
    }
  };
}

常用钩子选哪个？看你要干预什么阶段

不同钩子作用不同，别乱用：

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

开发阶段：用 configureServer（改 dev server）、handleHotUpdate（控制 HMR 行为）
模块处理：用 resolveId（解析路径）、load（读取内容）、transform（转译代码）
构建产出：用 generateBundle（打包后遍历文件大小）、closeBundle（清理资源）

注意：transform 在开发和构建中都会执行，但 configureServer 只在开发环境运行。

怎么在项目里用上这个插件

两步搞定：

把插件文件（如 my-plugin.js）放到项目里，比如 plugins/ 目录下
在 vite.config.js 的 plugins 数组中引入并调用：
import myPlugin from './plugins/my-plugin.js'
export default defineConfig({
plugins: [myPlugin()]
})

如果是本地开发调试，可以用 npm link 或直接 import 路径；发布后则通过 npm 安装使用。