KoaJS 2.0.0 webpack 结合 动态调试代码
koa2.0.0 的路由和视图渲染完之后的一个问题就是,如何高效的开发前端代码。
因为我之前的前端代码是用webpack进行打包,然后打包过程中,使用babel实现了,ES6语法的转换,这行我就不能太干脆的丢弃webpack,然后里面使用了react+react-router+reflux,整个开发体系还是比较可以的。为了整合之前的代码,需要将之前的connect框架改为koa2.0.0,毕竟koa的实现方式还有与express,connect等这样的框架,实现方式不太一样,所以,稍微还有有点小困难,不过我这里记录下,也就不困难了。
从webpack-dev-server说起,我们使用webpack-dev-server是为了能够时时监控我们的代码改变,然后用它自己的socket-io去刷新我们的页面,实现了代码修改即页面重载,当然只是在开发环境。
webpack-dev-server并没有多大的改变,只是将原来的一个proxy的操作去掉了,然后整合到koa的启动文件里面了。
1 | const webpack = require('webpack'); |
关于webpack的config文件的代码是不需要改变的,继续使用。
下面就是在koa的启动文件里面加入启动需要的proxy处理。
1 | //解析 开发环境 development |
就这么简单,这里使用了两个中间件:
koa-proxy,koa-convert。
解释一下好了,就是将访问的path中有带/js/部分的路径,进行重新proxy一下就好,这样就将文件转向到了webpack-dev-server这边的对应的文件了。相关的其他的问题可以参考我之前的几篇文章.