vite-plugin-image-list

A Vite plugin that automatically generates an image list file from image resources.

Features

• 🚀 Automatically scan and generate image list
• 🔍 Watch for changes and auto-update
• 📦 Multiple output formats (JS, TS, JSON)
• ⚡ Vite 6 compatible

Installation

npm install vite-plugin-ubox -D
# or
yarn add vite-plugin-ubox -D
# or
pnpm add vite-plugin-ubox -D

Usage

// vite.config.js
import { defineConfig } from 'vite'
import imageList from 'vite-plugin-ubox'

export default defineConfig({
  plugins: [
    imageList({
      include: ['src/assets/**/*.{png,jpg,svg}'],
      outputFile: 'src/image-list.ts',
      format: 'js'
    })
  ]
})

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | include | string|string[] | ['**/*.png', '**/*.jpg', '**/*.jpeg', '**/*.gif', '**/*.svg', '**/*.webp'] | File patterns to include | | exclude | string|string[] | [] | File patterns to exclude | | outputFile | string | 'src/image-list.js' | Output file path | | basePath | string | '' | Base path to prepend to image paths | | format | 'js'|'ts'|'json' | 'js' | Output file format | | root | string | process.cwd() | Project root directory | | dev | boolean | true | Enable in dev mode | | build | boolean | true | Enable in build mode | | debounce | number | 300 | Debounce time for file changes (ms) |

Output Example

For TypeScript format (format: 'ts'):

// Auto-generated by vite-plugin-image-list
// Generated at 2023-11-15T08:30:45.123Z

export const imageList = {
  logo: "/src/assets/images/logo.png",
  hero_bg: "/src/assets/images/hero-background.jpg"
} as const

export type ImageList = typeof imageList
export type ImageKey = keyof ImageList

export function getImagePath(key: ImageKey): string {
  return imageList[key]
}

License

MIT