前言在之前将vue-ssr改造为koa的web框架时，使用了一个第三方的npm库。包名koa2-webpack-middleware-zm已经迁移到koa-webpack-middleware-zm。这个包是我自己的，因为github上没有适合ssr特殊需求的包。所以我参考了koa-webpack-middleware之后写的包。并修复了原包中的一些bug。在这篇博文中，我将编写以下koa中间件。将webpack-dev-middleware等express中间件改造为koa中间件。1、koa和express普通中间件的区别。npmpackageinstallnpmikoaexpress-Dkoa和express的基本模板。koa只能通过new创建//koaconstkoa=require('koa')//...使用codeconstKoaApp=newKoa()KoaApp.listen(8000)express可以通过方法调用或者new创建//expressconstExpress=require('express')//...使用codeconstExpressApp=Express()ExpressApp.listen(8080)hello两者。koa://使用codeKoaApp.use(function(ctx,next){ctx.body='hellokoa'})express://使用codeExpressApp.use(function(req,res,next){res.end('helloexpress')})express中间件运行逻辑中间件接受一个方法的req、res、next三个参数。中间可以执行任何方法，包括异步方法。最后，必须通过res.end或者next通知这个中间件方法结束。如果res.end或者nextaccess没有执行，就会一直卡住直到超时。而之后的中间件将无法执行。koa中间件把逻辑中间件作为一个method或者other来运行，这里说说method，接受ctx和next两个参数。方法可以执行任何同步方法。您可以通过返回Promise来异步执行此操作。中间件在方法结束时通过返回判断是否进入下一个中间件。返回一个Promise对象，koa会等待异步通知完成。然后可以返回next()跳转到下一个中??间件。同样，如果Promise没有异步通知，也会卡住。2.异步中间件express的区别异步中间件ExpressApp.use(function(req,res,next){setTimeout(function(){res.end('test')},0)})express的异步是最常见的Callbackkoa异步中间件KoaApp.use(function(ctx,next){returnnewPromise(function(resolve,reject){if(ctx.path==='/'){ctx.body='hellokoa'resolve()}else{reject()}}).catch(next)})koa的异步是通过Promise完成的。这里我不写then，意思是resolve不会切换到下一个中??间件。catch直接绑定到next，reject用于通知跳转到下一个中??间件。3.修改一个express中间件为koahello-test.jsmodule.exports=function(req,res,next){setTimeout(function(){if(req.path==='/'){res.end('test')}else{next()}},0)}expressuseconsttest=require('./hello-test.js')ExpressApp.use(test)修改为koauseconsttest=require('./hello-test.js')KoaApp.use(function(ctx,next){constres=ctx.resconstreq=ctx.reqconstend=res.endreturnnewPromise(function(resolve,reject){res.end=function(){end.apply(this,arguments)resolve()}test(res,req,reject)}).catch(next)})运行resolve通过修改原来的res.end通知Promise结束，修改next使用reject而不是告诉Promise接下来调用。4、修改express注意事项原来的express组件是通过回调的方式通知结束的。不要直接await或yield组件。他们没有返回Promise对象。consttest=require('./hello-test.js')KoaApp.use(function*(next){constres=this.resconstreq=this.req//这种写法会导致后面注册的中间件失效.yieldtest(res,req,next)})KoaApp.use(asyncfunction(ctx,next){constres=ctx.resconstreq=ctx.req//这种写法会使后面注册的中间件失效awaittest(res,req,next)})只在catch中返回next()或跳转到下一个组件。5.webpack-dev-middlewaredevMiddleware.js改造示例=>{ctx.body=content;resolve(false);},setHeader:(name,value)=>{ctx.set(name,value);},},()=>{resolve(true);});}).then((err)=>{if(err){returnnext();}returnnull;});};}module.exports=koaDevMiddleware;这是昨天的最新代码。接下来通知一下，以后可能会改成这个。6.改造webpack-hot-middlewarehotMiddleware.jsfunctionkoaHotMiddleware(expressHotMiddleware){returnfunctionmiddleware(ctx,next){returnnewPromise((resolve)=>{expressHotMiddleware(ctx.req,ctx.res,resolve);}).然后(下一步);};}module.exports=koaHotMiddleware;7.示例源码koa-webpack-middleware-zm欢迎star、issues、fork、pr原文地址下一篇博文写在npm上，发布你的包，分享给其他人使用。添加测试用例添加travis-ci自动集成测试。
