跳至主要內容

构建工具-Vite插件开发1-入门

过往文章点我跳转介绍过一个【极简单的webpack插件开发流程】，但现在的构建工具早已不是webpack一家独大了，Vite在业内的占比也不容小觑。不过没有看过上文的建议先看下，本文相当于上文的“换汤不换药、换汤少换药版本”

本文旨在通过构建一个极简单的Vite插件，让大家可以快速体验下webpack插件的开发流程、架构模式。

以下是实现一个简单插件：在构建完成后生成一个markdown文件，文件里会记录构建时的日期。

与上一个极简webpack插件不同的是：本文的Vite插件会使用ts来写，ts的各种优势这里不再赘述，同时又能让大家结合看到规范的ts结合应该如何做

1. 创建插件函数

// 业务项目根目录新建文件my-vite-plugin.ts

// my-vite-plugin.ts
import type { PluginOption } from 'vite'
import { writeFileSync, mkdirSync } from 'fs'
import { join } from 'path'

interface BuildInfoOptions {
  outputDir?: string    // 文件输出目录（默认使用Vite build.outDir）
  filename?: string     // 生成的文件名（默认：自定义文件名.md）
}

export default function MyVitePlugin(options?: BuildInfoOptions): PluginOption {
  const defaultOptions = {
    filename: '自定义文件名.md',
    outputDir: undefined
  }
  const mergedOptions = { ...defaultOptions, ...options }

  return {
    name: 'my-vite-plugin',
    
    // 在配置解析完成后保存输出目录
    configResolved(config) {
      mergedOptions.outputDir = mergedOptions.outputDir || config.build.outDir
    },

    // 构建结束时生成文件
    closeBundle: {
      order: 'post', // 确保在最后执行
      async handler() {
        try {
          const curDate = new Date()
          const content =  `本次构建日期为：${curDate.getFullYear()}-${curDate.getMonth() + 1}-${curDate.getDay()}`;
          
          // 确保目录存在
          mkdirSync(mergedOptions.outputDir!, { recursive: true })
          
          // 写入文件
          const outputPath = join(mergedOptions.outputDir!, mergedOptions.filename!)
          writeFileSync(outputPath, content)
          
          console.log(`\n✅ 文件已生成在: ${outputPath}`)
        } catch (error) {
          console.error('\n❌ 生成失败，错误信息是:', error)
        }
      }
    }
  }
}

2. 在 Vite配置中使用插件

// vite.config.ts
import { defineConfig } from 'vite'
import MyVitePlugin from './vite-plugin-build-info'

export default defineConfig({
  plugins: [
    MyVitePlugin({
      filename: '构建日期记录.md', // 可选：自定义文件名
    })
  ]
})

本插件核心机制

  1. ‌钩子选择‌ 使用 closeBundle 钩子，确保在所有构建操作完成后执行文件生成
  2. ‌路径处理‌
    • 通过 configResolved 获取最终构建输出目录
    • 使用 path.join() 处理跨平台路径问题
  3. ‌异步安全‌
    • closeBundle 支持 async/await
    • 添加 order: 'post' 确保最后执行
  4. ‌错误处理‌
    • 使用 try/catch 包裹核心逻辑
    • 添加控制台成功/失败提示

调试插件

运行构建命令后，检查输出目录是否生成了预期文件：

pnpm build

通过以上步骤，你实现了一个简单但完整的 Vite 插件。实际开发中，可以根据需求访问更多编译信息

插件开发最佳实践

  1. 先明确自己的目标，然后去实践；
  2. 遇到问题，比如不知用什么钩子，直接查文档，或者问 AI，很快就有答案；
  3. 前端代码不过是 “字符串”，操作时请放心大胆；
  4. 可以提前入门级插件源码（不复杂的），比如 vite-plugin-html, vite-plugin-legacy，一两个立马就能驾轻就熟。
贡献者: king