README-zh.md

English | 简体中文

vite-plugin-hot-export

自动导出

为什么 ?

开发时用的image，svg等资源，我们需要手动通过index.ts导出, 这款插件就可以解放双手，并且支持HMR 🌈

🚀 特点

• 👻 支持文件夹批量生成
• 🍁 自动导出文件
• 🐥 自定义输出文件
• 🍄 自定义导入声明
• ✨ 支持HMR
• 🌈 支持多级目录
• 🍣 自动添加前缀

📺 预览

🦄 用法

安装

pnpm add -D vite-plugin-hot-export

配置 export.config.ts

• targetDir (必须) : 目标文件夹

• outputDir (可选,默认：目标文件夹) : 通过 index.ts 文件导出

• customImport (可选) : 通过index.ts自定义导入

• depth (可选 , 默认： true) : 递归子目录

• autoPrefix (可选 , 默认： false) : 自动给文件加前缀. 注意：如果customImport没有配置，则忽略该配置

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
    },
  ],
})

增加 vite-plugin-hot-export 插件到 vite.config.js / vite.config.ts 然后配置它:

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

export default {
  plugins: [
    HotExport()
  ]
}

然后起服务

pnpm run dev

没有生效?

如果你用的是webstorm，请参考:

作者

sudongyuer email:976499226@qq.com

📄 License

MIT License © 2021 SuDongYu