开发webpack mock server插件

原文地址:http://marxjiao.com/2017/06/02/mock-webpack-plugin/


对于前后端开发的项目,大部分的情况是先约定好接口格式,前端使用本地mock数据进行开发,开发后使用后端接口联调。webpack-dev-server提供了proxy配置,我们可以在开发中将接口代理到本地服务。mock数据使用json文件能最方便的进行开发,然而在webpack-dev-server 1.6以后的版本并不支持将接口代理到json文件。webpack-dev-server的proxy使用的是http-proxy-middleware,这个issue说明了原因。

所以在开发过程中我们需要搭建服务器,来将接口指向json文件。我开发了一个webpack插件,是起一个express服务来serve这些接口,并根据配置指向相应的json文件。

本文介绍插件开发细节,算是开发文档。如果只是想使用插件的话可以查看readme

选型

webpack dev server使用的express启动本地服务器,所以这里的mock server也选用express开发。

设计思路

  • webpack初始化插件时,将需要的配置信息传递给插件
  • 插件启动express
  • 使用express中间件处理请求,如果请求的接口匹配配置信息,就读取对应的json文件,将内容返回

开发

先写一个用来启动express服务的函数。调用函数时启动一个express server。

var express = require('express');
// 这里是处理请求的中间件
var returnData = require('./returnData.js');

module.exports = function({config, port = 3000}) {
    // 判断配置信息存在
    if (config) {
        const mockPort = port || 3000;
        // 新建express应用
        var app = express();

        // 使用中间件将配置信息放在请求对象里,方便后边的中间件使用
        app.use((req, res, next) => {
            req.config = config;
            next();           
        })

        // 用中间件处理所有请求
        app.use(returnData);

        // 启动server
        var server = app.listen(mockPort, function () {
            var host = server.address().address;
            var port = server.address().port;
            console.log('Mock server listening at http://%s:%s', host, port);
        });
    }
    else {
        console.log('No Config File!')
    }
}

处理请求的中间件returnData.js。从请求中读取配置信息,如果请求的接口在配置中,则读取对应的文件,如果不在,返回提示信息。这里使用promise封装了fs.readFile方便使用async/await调用。

const fs = require('fs');

module.exports = async function(req, res, next) {
    const config = req.config;
    // 判断请求的接口在配置中
    if (config[req.path]) {
        // 读取对应的json文件
        const data = await fsRead(config[req.path].path);
        // 返回json文件
        res.send(JSON.parse(data));
    }else {
        // 如果接口没在配置中,返回错误信息
        res.send({errno: -1, msg: 'No such proxy: ' + req.path});
    }
    next();
}


// 使用promise封装fs.readFile,方便使用async/await
function fsRead(filePath) {
    return new Promise((resolve, reject) => {
        fs.readFile(filePath, (err, data) => {
            if (err) {
                if (err.syscall === 'open') {
                    console.log('Open "' + err.path +'" fail!')
                }
                reject(err);
            }
            resolve(data.toString())
        })
    })
}

server相关的代码就写好了,下面只需要写一个webpack插件,再插件调用时启动express就好了。

const server = require('./server.js');

function MockWebpackPlugin({config, port = 3000}) {

    // 将config和port放在属性里,方便apply方法调用
    this.config = config;
    this.port = port;
}

MockWebpackPlugin.prototype.apply = function (compiler) {
    // 调用启动express的函数
    server({config: this.config, port: this.port});

    // 注册一个webpack插件
    compiler.plugin("emit", (compilation, callback) => {
        callback();
    });
}


到这里插件就开发完了。�如何使用请看这里

项目源码:https://github.com/MarxJiao/mock-webpack-plugin

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 131,683评论 18 138
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,234评论 1 32
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,350评论 7 110
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 167,324评论 24 705
  • 迷迷糊糊了一上午的唐萌萌,就听到最后一堂课下课时班主任说中午会突击检查抽屉,有小说书什么的,趁中午带回家去,不然就...
    花夏夏阅读 120评论 0 2
  • 对邮箱君来说,今天是颇具重要性的日子——“517世界电信日”。作为移动大家庭的一员,自然少不了邮箱君。 邮箱君可是...
    139邮箱大玩家阅读 267评论 0 1
  • dayButton.contentHorizontalAlignment = UIControlContentHo...
    陈世美_阅读 414评论 0 1
  • 莫道年少不知愁,念也悠悠,怨也悠悠。惊梦湿枕五更明。 昔日旧梦都成空,留也难受,舍也难受。话不成诗泪双流。
    缘来浮生若梦阅读 342评论 0 2