sudongyuer/vite-plugin-hot-export

🐝 A vite plugin automatically export files & HMR support

vite-plugin-hot-export

Automatically export files with HMR

English|简体中文

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
• 🌈 Nest directory generate support
• 🍣 Auto Prefix support

📺 Preview

🦄 Usage

Install

pnpm add -D vite-plugin-hot-export

Config export.config.ts

• targetDir (require) : the directory to export files

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

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

• depth (optional , default true) : traverse all subdirectories

• autoPrefix (optional , default false) : auto add prefix to the file name. Note that the if you open the customImport option,this option will be ignored

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

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

Not Work?

If you are use webstorm, please check the following:

Author

sudongyuer email:976499226@qq.com

📄 License

MIT License © 2021 SuDongYu