Vite 插件

下面是一个简单的 Vite 插件示例，它会在构建过程中将代码中的 __VITE_PLUGIN_GREETING__ 占位符替换为自定义文本：

// vite.config.js
import { defineConfig } from 'vite'

// 基础版插件
const simplePlugin = () => ({
  name: 'simple-vite-plugin',
  transform(code) {
    return code.replace(/__VITE_PLUGIN_GREETING__/g, 'Hello from Vite Plugin!')
  }
})

// 可配置版插件（可选增强）
const configurablePlugin = (options = {}) => {
  const replacement = options.text || 'Default greeting'
  return {
    name: 'configurable-vite-plugin',
    transform(code, id) {
      // 仅处理 JS/TS 文件
      if (/\.[jt]sx?$/.test(id)) {
        return {
          code: code.replace(/__VITE_PLUGIN_GREETING__/g, replacement),
          map: null // 可选 source map
        }
      }
    }
  }
}

export default defineConfig({
  plugins: [
    simplePlugin(),
    // configurablePlugin({ text: 'Custom greeting' })
  ]
})

插件说明：

基本结构：
- 插件是一个返回对象的工厂函数
- 必须包含 name 属性作为插件标识
- 通过生命周期钩子（如 transform）实现功能
核心功能：
- 在 transform 钩子中处理源代码
- 使用正则表达式替换指定占位符
- 支持返回转换后的代码和 source map
可选项：
- 通过插件参数接受配置
- 添加文件类型过滤（.js/.ts 等）
- 支持生成 source map（需要额外处理）

使用方式：

在代码中任意位置使用占位符：

// main.js
console.log(__VITE_PLUGIN_GREETING__)

运行开发服务器或构建：

npm run dev
# 或
npm run build

输出结果会变成：

console.log("Hello from Vite Plugin!")

进阶扩展方向：

添加文件类型白名单
支持多个替换模式
实现虚拟模块加载
添加开发服务器中间件
支持热更新逻辑
处理 CSS 等非 JS 资源

这个插件演示了 Vite 插件的核心机制，你可以根据实际需求组合使用不同的生命周期钩子（如 resolveId、load、configureServer 等）实现更复杂的功能。

FilesExpand file tree

vite 插件.md

Latest commit

History

vite 插件.md

File metadata and controls

Vite 插件