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

options

Config

Vite

// 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

// rollup.config.js
import DevProxy from 'unplugin-dev-proxy/rollup'

export default {
  plugins: [
    DevProxy({ /* options */ }),
  ],
}

Webpack

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-dev-proxy/webpack')({ /* options */ })
  ]
}

Nuxt

// nuxt.config.js
export default {
  buildModules: [
    ['unplugin-dev-proxy/nuxt', { /* options */ }],
  ],
}

This module works for both Nuxt 2 and Nuxt Vite

Vue CLI

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-dev-proxy/webpack')({ /* options */ }),
    ],
  },
}

esbuild

// esbuild.config.js
import { build } from 'esbuild'
import DevProxy from 'unplugin-dev-proxy/esbuild'

build({
  plugins: [DevProxy()],
})