vite插件开发系列1-写一个vite插件自动保存所有成功的ajax请求结果为js文件（供mock）_vite写一个请求

插件的作用

前端需要后端起服务来请求接口，后端没启，或者重启，这时候mock就派上用场了。
如果有这样一个vite插件，可以把之前请求后端时的成功结果自动保存至相应js文件中，开发mock就快很多了，话不多说，我们来开发一个

客户端与服务端通信

客户端也就是前端网页，服务端就是vite服务器
从客户端向服务端发送事件，我们可以使用 hot.send：

if (import.meta.hot) {
  import.meta.hot.send('my:from-client', { msg: 'Hey!' })
}
1
2
3

那么，以axios库为例，在拦截器中接口返回成功，就把res数据传给vite服务器

instance.interceptors.response.use(
  res => {
    ...
    if (res.status == 200) {
      // 请求成功向mock插件发送消息
      if (import.meta.hot) {
        import.meta.hot.send('mock:ajax-success', res);
      }
      return res;
    }
  },
1
2
3
4
5
6
7
8
9
10
11

插件中接受客户端消息

server.ws.on监听事件
路径的话自行更改成自己想要的

import fs from 'node:fs';
import path from 'node:path';

// 每次成功的ajax请求（status===200）
// 都会在mock/generated/api文件夹下生成对应的js文件
function mockPlugin() {
  return {
    name: 'mock-plugin',
    configureServer(server) {
      server.ws.on('mock:ajax-success', res => {
        // 请求路径的最后一截作为文件名
        const pathArr = res.config.url.split('/');
        const name = pathArr[pathArr.length - 1];
        // 转js对象为json字符串
        const data = JSON.stringify(res.data);
        const filePath = path.resolve(__dirname, '../', 'mock', 'generated', 'api', `${name}.js`);
        const fileContent = 'module.exports = ' + data;
        // { flag: 'w' }表示写入并直接覆盖
        fs.writeFile(filePath, fileContent, { flag: 'w' }, err => {
          if (err) {
            console.error(err);
          } else {
            console.log(`File '${filePath}' has been written.`);
          }
        });
      });
    },
  };
}
module.exports = {
  mockPlugin,
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

vite.config.js使用插件

import { mockPlugin } from './plugin/mock.js';
...
export default ({ mode }) => {
  console.log(mode === 'development' ? '开发环境 ' + mode : '生产环境 ' + mode);
  return defineConfig({
    ...
    plugins: [
      ...
      mockPlugin(),
  });
};

1
2
3
4
5
6
7
8
9
10
11
12