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

川长思鸟来 2024-03-23 14:48 29阅读 0赞

#### 插件的作用 ####

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

#### 客户端与服务端通信 ####

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

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

那么，以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;
        }
      },

#### 插件中接受客户端消息 ####

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,
    };

#### vite.config.js使用插件 ####

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