https://github.com/sudongyuer/vite-plugin-hot-export

🐝 A vite plugin automatically export files & HMR support
https://github.com/sudongyuer/vite-plugin-hot-export

auto-export automatically hmr vite vite-plugin

Last synced: 3 months ago
JSON representation

🐝 A vite plugin automatically export files & HMR support

• Host: GitHub
• URL: https://github.com/sudongyuer/vite-plugin-hot-export
• Owner: sudongyuer
• License: mit
• Created: 2022-07-09T14:36:47.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-09-17T04:45:22.000Z (over 2 years ago)
• Last Synced: 2024-10-26T03:12:14.749Z (3 months ago)
• Topics: auto-export, automatically, hmr, vite, vite-plugin
• Language: TypeScript
• Homepage:
• Size: 20.1 MB
• Stars: 57
• Watchers: 1
• Forks: 6
• Open Issues: 2
• Metadata Files:
  • Readme: README-zh.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
[English](https://github.com/sudongyuer/vite-plugin-hot-export#readme) | 简体中文

# vite-plugin-hot-export

自动导出

[![NPM version](https://badge.fury.io/js/vite-plugin-hot-export.svg)](https://www.npmjs.com/package/vite-plugin-hot-export)







## 为什么 ?

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

## 🚀 特点

- 👻 支持文件夹批量生成

- 🍁 自动导出文件

- 🐥 自定义输出文件

- 🍄 自定义导入声明

- ✨ 支持`HMR`

- 🌈 支持多级目录

- 🍣 自动添加前缀

## 📺 预览







## 🦄 用法

### 安装

```bash

pnpm add -D vite-plugin-hot-export

```

### 配置 `export.config.ts`

- `targetDir` (必须) : 目标文件夹

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

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

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

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

```js

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 然后配置它:

```js

// vite.config.js / vite.config.ts

import HotExport from 'vite-plugin-hot-export'

export default {

  plugins: [

    HotExport()

  ]

}

```

然后起服务

```bash

pnpm run dev

```

## 没有生效?

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

![image-20220717101450402](https://tva1.sinaimg.cn/large/e6c9d24egy1h49pefcb4jj21580u0wi5.jpg)

## 作者

sudongyuer email:[email protected]

## 📄 License

[MIT](./LICENSE) License © 2021 [SuDongYu](https://github.com/sudongyuer)