Vite 插件系统

export default defineConfig({
  plugins: [
    // 默认：normal（在 Vite 核心插件之后）
    myPlugin(),

    // pre：在 Vite 核心插件之前执行
    { ...myPrePlugin(), enforce: 'pre' },

    // post：在所有插件之后执行（含构建插件）
    { ...myPostPlugin(), enforce: 'post' }
  ]
})

const virtualModulePlugin = (): Plugin => ({
  name: 'virtual-module',

  resolveId(id) {
    if (id === 'virtual:config') {
      return '\0virtual:config'  // \0 前缀约定为虚拟模块
    }
  },

  load(id) {
    if (id === '\0virtual:config') {
      return `export default ${JSON.stringify({ version: '1.0.0' })}`
    }
  }
})

const markdownPlugin = (): Plugin => ({
  name: 'vite-plugin-md',

  transform(code, id) {
    if (!id.endsWith('.md')) return null

    // 将 Markdown 转为 Vue 组件
    const html = marked.parse(code)
    return {
      code: `export default { template: ${JSON.stringify(html)} }`,
      map: null  // 或提供 source map
    }
  }
})

const timingPlugin = (): Plugin => {
  let startTime: number

  return {
    name: 'build-timing',
    buildStart() {
      startTime = Date.now()
      console.log('构建开始...')
    },
    buildEnd() {
      console.log(`构建耗时: ${Date.now() - startTime}ms`)
    }
  }
}

const autoImportPlugin = (): Plugin => ({
  name: 'auto-import',
  enforce: 'pre',

  config() {
    return {
      resolve: {
        alias: {
          '@auto': resolve(__dirname, 'src/auto-imports')
        }
      },
      optimizeDeps: {
        include: ['vue', 'pinia']
      }
    }
  }
})

let isProduction: boolean

const envPlugin = (): Plugin => ({
  name: 'env-check',

  configResolved(config) {
    isProduction = config.command === 'build'
    console.log(`模式: ${config.mode}, 命令: ${config.command}`)
  }
})

const mockApiPlugin = (): Plugin => ({
  name: 'mock-api',

  configureServer(server) {
    // 在内部中间件之前注册
    server.middlewares.use('/api', (req, res) => {
      res.setHeader('Content-Type', 'application/json')
      res.end(JSON.stringify({ code: 0, data: 'mock' }))
    })

    // 在内部中间件之后注册（返回函数）
    return () => {
      server.middlewares.use((req, res, next) => {
        // 自定义 404 处理
        if (req.url?.startsWith('/missing')) {
          res.statusCode = 404
          res.end('Not Found')
          return
        }
        next()
      })
    }
  }
})

const htmlPlugin = (): Plugin => ({
  name: 'html-transform',

  transformIndexHtml(html) {
    return html.replace(
      '<title>__TITLE__</title>',
      '<title>My App - Production</title>'
    )
  }
})

// 对象形式（更精细控制）
const htmlPlugin2 = (): Plugin => ({
  name: 'html-inject',

  transformIndexHtml: {
    order: 'pre',  // 'pre' | 'post'
    handler(html, ctx) {
      // ctx.filename, ctx.server, ctx.bundle
      return [
        {
          tag: 'script',
          attrs: { src: '/analytics.js', defer: true },
          injectTo: 'head'
        }
      ]
    }
  }
})

const jsonHmrPlugin = (): Plugin => ({
  name: 'json-hmr',

  handleHotUpdate({ file, server }) {
    if (file.endsWith('.json')) {
      // 发送自定义事件到客户端
      server.ws.send({
        type: 'custom',
        event: 'json-update',
        data: { file, content: fs.readFileSync(file, 'utf-8') }
      })
      // 返回空数组阻止默认 HMR
      return []
    }
  }
})

// main.ts
if (import.meta.hot) {
  import.meta.hot.on('json-update', ({ file, content }) => {
    console.log(`${file} 已更新`, JSON.parse(content))
  })
}

import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy'
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    vue({
      script: {
        defineModel: true
      },
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith('my-')
        }
      }
    }),

    legacy({
      targets: ['defaults', 'not IE 11'],
      modernPolyfills: true
    }),

    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: 'My App',
        short_name: 'App',
        theme_color: '#ffffff'
      }
    })
  ]
})

import fg from 'fast-glob'
import { resolve, basename } from 'path'

export function autoRoutes(pagesDir: string): Plugin {
  let root: string

  return {
    name: 'vite-plugin-auto-routes',
    enforce: 'pre',

    configResolved(config) {
      root = config.root
    },

    resolveId(id) {
      if (id === 'virtual:routes') return '\0virtual:routes'
    },

    load(id) {
      if (id !== '\0virtual:routes') return

      const files = fg.sync('**/*.{vue,tsx}', {
        cwd: resolve(root, pagesDir)
      })

      const routes = files.map((file) => {
        const name = basename(file, /\.\w+$/.exec(file)![0])
        const path = '/' + file
          .replace(/\.\w+$/, '')
          .replace(/index$/, '')
          .replace(/\[(\w+)\]/g, ':$1')
        return { path, file }
      })

      const imports = routes
        .map((r, i) => `const C${i} = () => import('${pagesDir}/${r.file}')`)
        .join('\n')

      const routeDefs = routes
        .map((r, i) => `  { path: '${r.path}', component: C${i} }`)
        .join(',\n')

      return `${imports}\nexport const routes = [\n${routeDefs}\n]`
    },

    handleHotUpdate({ file, server }) {
      if (file.includes(pagesDir)) {
        const mod = server.moduleGraph.getModuleById('\0virtual:routes')
        if (mod) {
          server.moduleGraph.invalidateModule(mod)
          server.ws.send({ type: 'full-reload' })
          return []
        }
      }
    }
  }
}

// 设置环境变量查看详细日志
// DEBUG=vite:* pnpm dev

// 在插件中添加性能标记
transform(code, id) {
  const start = performance.now()
  // ... 转换逻辑
  const duration = performance.now() - start
  if (duration > 100) {
    console.warn(`[slow] ${id}: ${duration.toFixed(0)}ms`)
  }
}