今天是我入职的第二天。领导跟我说服务器渲染的文件是昨天配置好的，今天就研究一下怎么用koa来搭建一个node服务器吧！和往常一样，我去koa官网查看什么是koa，官网简单的一句话介绍：koa——基于node.js平台的下一代web开发框架。个人感觉官方的koa文档对前端小白不是很友好。入门前推荐阅读阮一峰的koa框架教程和廖雪峰的koa入门文章。然后介绍第一步项目，安装koa：npmikoa-S安装完成后，先在项目根目录下创建一个server文件夹，然后在该文件夹下创建一个server.js文件，然后在里面引入koa：constKoa=require('koa')constapp=newKoa()constisDev=process.env.NODE_ENV==='development'为什么在这里声明isDev？因为服务端渲染分为两种不同的情况，开发环境和生产环境。然后我们继续在server.js中写一个中间件记录所有的请求和爬取错误，这样我们就可以知道服务端渲染的过程中是否有一些错误，及时排查。首先尊重：app.use(async(ctx,next)=>{try{console.log(`requestwithpath${ctx.path}`)awaitnext()}catch(err){console.log(err)ctx.status=500if(isDev){ctx.body=err.message}else{ctx.body='pleasetryagainlater'}}})简单解释：在函数前面加一个async，表示异步处理function，参数next表示执行下一个异步处理的函数。在try循环中，控制台打印出请求的路径。如果isDev为true，则可以直接将错误信息写入body，这样在页面上就可以直接看到错误信息。如果不是开发环境，可以写一个友好的提示文字，例如：“请稍后再试”。这是最简单的koa中间件，用于记录所有的请求和错误，并返回错误信息。接下来，让我们谈谈如何处理服务器端渲染。在处理服务端渲染之前，先在终端安装koa-router：npmikoa-router-S这是koa提供的路由工具。然后在server文件夹下创建一个routers文件夹，然后在里面创建两个文件，一个是dev-ssr.js，一个是ssr.js。前者处理开发时服务端渲染，后者处理正式环境下的情况。在dev-ssr.js文件中，首先要引入koa-router：constRouter=require('koa-router')这里需要使用和安装两个工具：npmiaxios-Snpmimemory-fs-D在节点端发送请求的axios，当然也可以在浏览器端发送请求。安装的时候记得后面加-S，因为可以在业务代码中使用。而memory-fs只在开发的时候用到，所以后面跟着-D。可能有童鞋要问了，这个memory-fs是干什么用的？别着急，润图截一张官网图给大家一目了然：大致思路是：一个简单的内存文件系统。将数据保存在JavaScript对象中。那么废话不多说，先介绍这两个工具：constaxios=require('axios')constMemoryFS=require('memory-fs')接下来介绍两个工具：constwebpack=require('webpack')constVueServerRenderer=require('vue-server-renderer')因为需要在node开发环境中打包代码，需要服务端渲染。接下来介绍下serverConfig，也就是入职第一天写的配置文件webpack.config.server.js：constserverConfig=require('../../build/webpack.config.server')那么，如何可以让webpack在node开发环境中运行吗？答案是通过serverCompiler:constserverCompiler=webpack(serverConfig)然后创建一个新的mfs实例：constmfs=newMemoryFS()serverCompiler.outputFileSystem=mfs这指定了webpack的输出目录在MemoryFS中。有了这些配置之后，声明一个bundle：letbundle用来记录webpack每次生成的新文件。serverCompiler.watch({},(err,stats)=>{if(err)throwerrstats=stats.toJson()stats.erros.forEach(err=>console.log(err))stats.hasWarnings.forEach(warn=>console.warn(err))constbundlePath=path.join(serverConfig.output.path,'vue-ssr-server-bundle.json')bundle=JSON.parse(mfs.readFileSync(bundlePath,'utf-8'))})这里使用watch()的好处是：和使用webpack-dev-server一样，每次修改client目录下的文件，都会重新执行打包，然后就可以得到新文件。serverCompiler.watch()第一个参数是一个空对象，第二个参数是一个回调。如果有err直接抛出。然后觉得stats有点晦涩难懂，领导让我先做，有空再看webpack文档。接下来就可以读取生成的bundle文件，拼接读取文件的路径，设置文件名，并指定编码为utf-8，最后通过JSON.parse()将字符串转成JSON。执行上述步骤后，您可以将内容返回为HTML。在服务器端呈现期间，使用ejs模板引擎生成HTML。使用VueServerRenderer的createBundleRenderer()方法帮助生成一个可以直接调用renderer的函数。它在这里接收几个参数，第一个是inject，设置为false，这样就不会进行其他的注入操作。第二个是clientManifest，它会自动生成一个带有script标签的js文件引用的字符串，这样就可以直接添加到ejs的内容中。最后，dev-ssr.js的完整代码如下：constRouter=require('koa-router')constaxios=require('axios')constpath=require('path')constfs=require('fs')constMemoryFS=require('memory-fs')constwebpack=require('webpack')constVueServerRenderer=require('vue-server-renderer')constserverConfig=require('../../build/webpack.config.server')constserverCompiler=webpack(serverConfig)constmfs=newMemoryFS()serverCompiler.outputFileSystem=mfsletbundleserverCompiler.watch({},(err,stats)=>{if(err)throwerrstats=stats.toJson()stats.erros.forEach(err=>console.log(err))stats.hasWarnings.forEach(warn=>console.warn(err))constbundlePath=path.join(serverConfig.output.path,'vue-ssr-server-bundle.json')bundle=JSON.parse(mfs.readFileSync(bundlePath,'utf-8'))})consthandleSSR=async(ctx)=>{if(bundle){ctx.body='等待稍等...'return}constclientManifestResp=awaitaxios.get('http://127.0.0.1:8080/vue-ssr-client-manifest.json')constclientManifest=clientManifestResp.dataconsttemplate=fs.readFileSync(path.join(__dirname,'../server.template.ejs'))constrenderer=VueServerRenderer.createBundleRenderer(bundle,{inject:false,clientManifest})}写在最后，使用koa搭建nodeserver的心得刚刚讲了renderer这一步，后面会继续讲如何将bundle渲染成实际的HTML内容，并添加到模板最新文章会第一时间更新在我的公众号<润图大叔>，欢迎关注。
