unplugin-dev-proxy
v1.0.2
Published
🛰 Dev proxy enhanced with transform response json data to ts, mock data, identity auth, etc. Currently only vite is supported
Downloads
29
Readme
unplugin-dev-proxy
🛰 A plugin that enhance dev proxy with transform response json data to ts, mock data, identity auth, etc.
Features
- [x] transform response data to typescript declare file.
- [ ] mock data.
- [ ] identity auth.
Quick Start
install
npm i unplugin-dev-proxy -D
usage
Feature 1: transform response json data to TypeScript type
app.tsx
axios.get('/api/search?keywords=MELANCHOLY')
for example, if the backend return as below
{
"data": 1
}
it will create @types/GET_Search.d.ts
as below
declare interface GETSearchResponseType {
data: number
}
File naming rule
${options.rootDir}/${req.Method}_${pathname(req.url)}
what is pathname
function? for example
pathname('/api/search?keywords=hello') === 'ApiSearch'
Type naming rule
the rule of type name is ${req.Method}${pathname(req.url)}${options.suffix}
Options
Config
// vite.config.ts
import DevProxy from 'unplugin-dev-proxy/vite'
const r = (p: string) => resolve(__dirname, p)
export default defineConfig({
plugins: [
DevProxy({
'/api': {
target: 'https://autumnfish.cn',
json2ts: {
rootDir: r('@types'),
}
}
}),
]
})
Example: playground/
// rollup.config.js
import DevProxy from 'unplugin-dev-proxy/rollup'
export default {
plugins: [
DevProxy({ /* options */ }),
],
}
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-dev-proxy/webpack')({ /* options */ })
]
}
// nuxt.config.js
export default {
buildModules: [
['unplugin-dev-proxy/nuxt', { /* options */ }],
],
}
This module works for both Nuxt 2 and Nuxt Vite
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-dev-proxy/webpack')({ /* options */ }),
],
},
}
// esbuild.config.js
import { build } from 'esbuild'
import DevProxy from 'unplugin-dev-proxy/esbuild'
build({
plugins: [DevProxy()],
})