koa2.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的启动文件里面了。

const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const config = require('./webpack.config.development');
const debug = require('debug');
new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  noInfo: false,
  historyApiFallback: true,
  stats: { colors: true },
  headers: { 'Access-Control-Allow-Origin': '*' }
}).listen(8080, '127.0.0.1', function(err,result) {
  if (err) {
    console.log(err);
  }
  console.log('Webpack Listening at 127.0.0.1:8080');
});

关于webpack的config文件的代码是不需要改变的,继续使用。

下面就是在koa的启动文件里面加入启动需要的proxy处理。

//解析 开发环境 development
app.use(convert(proxy({
  host:'http://127.0.0.1:8080/js',
  match: /^\/js\//
})));

就这么简单,这里使用了两个中间件:

koa-proxy,koa-convert。

解释一下好了,就是将访问的path中有带/js/部分的路径,进行重新proxy一下就好,这样就将文件转向到了webpack-dev-server这边的对应的文件了。相关的其他的问题可以参考我之前的几篇文章

Tagged: , ,

Comments are closed.