vite-plugin-hot-export

Automatically export files with HMR

Why ?

When developing, we often need to download some images or svg from the internet, and when we need to use them, we need export them in index.ts file manually, this plugin can handle this for you automatically.And support HMR 🌈

🚀 Features

• Multiple directory generate support
• Auto export files
• custom outputDir
• 🍄 Support custom import statement
• ✨ HMR support

📺 Preview

🦄 Usage

Install

pnpm add -D vite-plugin-hot-export

Config export.config.ts

• targetDir (require) : the directory to export files

• outputDir (optional): the directory to generate the index.ts file to export files

• customImport (optional): custom the import statement to use in the index.ts file

import { defineExportConfig } from 'vite-plugin-export'
export default defineExportConfig({
  configs: [
    {
      targetDir: './src/assets/images',
    },
    {
      targetDir: './src/assets/css',
      outputDir: './src/assets/css',
    },
    {
      targetDir: './src/assets/svgs',
      customImport: (fileName, file) => {
        return `import { ReactComponent as ${fileName} } from '${file}'`
      },
    },
  ],
})

Add vite-plugin-hot-export plugin to vite.config.js / vite.config.ts and configure it:

// vite.config.js / vite.config.ts
import HotExport from 'vite-plugin-hot-export'

export default {
  plugins: [
    HotExport()
  ]
}

Then start your project

pnpm run dev

Author

sudongyuer email:[email protected]

📄 License

MIT License © 2021 SuDongYu