一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第8天，点击查看活动详情。

一、前言

后端接口迟迟不来，前端该怎么mock？我之前写过一篇文章 如何自建前端mock体系，是基于浏览器IndexedDB的解决方案,可以参考一下。

我们可以将自建Mock体系理解为，前端可以直接操作数据库里的数据，比如CRUD操作，经过基于IndexedDB数据库封装好的接口会返回一个promise对象，我们就像使用Axios请求后端接口一样去请求Mock接口。

本文侧重介绍面向webpack的本地mock方案。

截止目前，前端开源领域提供了许多基于webpack的本地mock方案，这些方案多数是封装好的npm包，比如webpack-api-mocker、webpack-mock-server,本文不会去讲解这些npm包的使用，而是手写一个mock插件/中间件,实现前端工程本地mock。

二、原理

mock方案核心流程原理

mock中间件核心原理

三、实现代码

//mock.config.js

coonst fs=require('fs')
const path=require('path')

//response函数:对接口进行响应
function response(res,content,type='json'){
    res.type(type) //设置响应类型
    res.write(content) //设置响应内容
    res.end()
}

//mock函数
function mock(res,file){
    //读取本地json文件
    fs.readFile(file,'utf8',(error,content)=>{
        if(error){
            response(res,error.message,'html')
        }
        response(res,content)
    })
}

//编写中间件
const mockMiddleware=(config)=>(req,res,next)=>{
    const {projectDir,mockDir}=config
    
    const filePath=path.resolve(projectDir,`./${mockDir+req.path}.json`)
    
    //检查当前文件是否能被正常解析
    return fs.stat(filePath,(error)=>{
        if(error){
            next()
        }else{
            mock(res,filePath)
        }
    })
}

module.exports=mockMiddleware

以上就是我们编写的mock中间件，下面我们在webpack.dev.config.js中使用我们编写的中间件

......
const mockMiddleware =require('./mock.config.js')
module.exports={
    ......
    devServer:{
        contentBase:path.join(__dirname,'.'),
        historyApiFallback:false,
        hot:false,
        host:'0.0.0.0',
        port:8080,
        before(app){//before钩子函数
            const projectDir=path.resolve()
            const mockDir='./mock'
            app.use(mockMiddleware({projectDir, mockDir}))
        }
    }
}

打开浏览器输入访问localhost:8080/ad/index/gray,可以看到成功返回数据