Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sudongyuer/unplugin-hot-export
✨ Auto export files support webpack vite rollup esbuild
https://github.com/sudongyuer/unplugin-hot-export
auto-export esbuild hmr vite webpack
Last synced: 22 days ago
JSON representation
✨ Auto export files support webpack vite rollup esbuild
- Host: GitHub
- URL: https://github.com/sudongyuer/unplugin-hot-export
- Owner: sudongyuer
- License: mit
- Created: 2022-07-26T10:12:58.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-08-29T17:17:39.000Z (about 2 years ago)
- Last Synced: 2024-09-16T09:39:17.110Z (2 months ago)
- Topics: auto-export, esbuild, hmr, vite, webpack
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/unplugin-hot-export
- Size: 1.26 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# unplugin-hot-export
Automatically export files with HMR
[](https://www.npmjs.com/package/unplugin-hot-export)
## 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
```bash
pnpm add -D unplugin-hot-export
```
Vite
```ts
// vite.config.ts
import { vitePlugin as HotExport } from 'unplugin-hot-export'
export default defineConfig({
plugins: [HotExport()],
})
```
Rollup
```ts
// rollup.config.js
import { rollupPlugin as HotExport } from 'unplugin-hot-export'
export default {
plugins: [HotExport()],
}
```
esbuild
```ts
// esbuild.config.js
import { build } from 'esbuild'
const HotExport = require('unplugin-hot-export')
build({
plugins: [HotExport.esbuildPlugin()],
})
```
Webpack
```ts
// webpack.config.js
const HotExport = require('unplugin-hot-export')
module.exports = {
/* ... */
plugins: [HotExport.webpackPlugin()],
}
```
NextJs
```ts
// next.config.js
const HotExport = require('unplugin-hot-export')
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
webpack: (config, _) => {
config.plugins.push(HotExport.webpackPlugin())
return config
},
eslint: {
ignoreDuringBuilds: true,
},
}
module.exports = nextConfig
```
### 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
```js
import { defineExportConfig } from 'unplugin-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
},
],
})
```
Then start your project
```bash
pnpm run dev
```
## Not Work?
If you are use webstorm, please check the following:
## Author
sudongyuer email:[email protected]
## 📄 License
[MIT](./LICENSE) License © 2021 [SuDongYu](https://github.com/sudongyuer)