Skip to content

๐Ÿ A vite plugin automatically export files & HMR support

License

Notifications You must be signed in to change notification settings

sudongyuer/vite-plugin-hot-export

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

vite-plugin-hot-export

Automatically export files with HMR

English|็ฎ€ไฝ“ไธญๆ–‡

NPM version

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:

image-20220717101450402

Author

sudongyuer email:976499226@qq.com

๐Ÿ“„ License

MIT License ยฉ 2021 SuDongYu