查看: 159|回复: 0

[JavaScript/JQuery] 入职第二天:使用koa搭建node server是种怎样的体验

发表于 2018-5-12 08:00:02

今天是我入职第二天,leader跟我说,昨天配置好了服务端渲染的文件,今天就先研究研究如何使用koa来搭建一个node server吧!

按照惯例,我去koa官网查了一下什么是koa,结果官网很简单的一句话介绍:koa--基于node.js平台的下一代web开发框架。

个人感觉koa官方文档对于前端小白来说,写的不是很友好,建议上手之前先看看阮一峰的koa框架教程和廖雪峰写的关于koa入门文章。

然后引入项目第一步,安装koa:

  1. npm i koa -S
复制代码

安装完之后,首先在项目根目录下新建一个server文件夹,然后在此文件夹下新建一个server.js文件,然后在里面引入koa:

  1. const Koa = require('koa')
  2. const app = new Koa()
  3. const isDev = process.env.NODE_ENV === 'development'
复制代码

这里为什么要声明isDev呢?因为服务端渲染是分开发环境和生产环境两种不同的情况。

然后我们继续在server.js里面先写一个中间件来记录所有的请求和抓取的错误,这样可以很好的了解到在服务端渲染的过程中是否出现了一些错误,并及时排查掉错误。

先撸为敬:

  1. app.use(async (ctx, next) => {
  2. try {
  3. console.log(`request with path ${ctx.path}`)
  4. await next()
  5. } catch (err) {
  6. console.log(err)
  7. ctx.status = 500
  8. if (isDev) {
  9. ctx.body = err.message
  10. } else {
  11. ctx.body = 'please try again later'
  12. }
  13. }
  14. })
复制代码

简单解释一下:在函数前面加一个async,就代表异步处理函数,而参数next表示执行下一个 异步处理的函数。在try循环体内,console打印出请求的路径。如果是isDev为true的情况,可以直接将错误信息写到body里面,这样就可以在页面上直接看到错误信息。如果不是开发环境,可以写一个友善的提醒文字,例如:“please try again later”。

这就是最简单的一个koa中间件,用来记录所有的请求及出现的错误,并且返回一个错误信息。

接下来,聊一聊如何处理服务端渲染。

在处理服务端渲染之前,首先要在terminal里面安装一下koa-router:

  1. npm i koa-router -S
复制代码

这是koa提供的一个路由的工具。然后在server文件夹下面新建一个routers文件夹,紧接着在里面新建两个文件,一个是dev-ssr.js,另一个是ssr.js。前者是处理开发时服务端渲染的情况,后者是处理正式环境下的情况。

在dev-ssr.js文件中,首先要引入koa-router:

  1. const Router = require('koa-router')
复制代码

在这里,还需要使用到两个工具,需要安装下:

  1. npm i axios -S
  2. npm i memory-fs -D
复制代码

在node端发送请求的axios,当然也可以在浏览器端发送请求。在安装的时候记住后面跟的是-S,因为在业务代码中可以用到。

而memory-fs只有在开发的时候才会用到,所以后面跟的是-D。可能有童鞋要问了,这个memory-fs是用来干嘛的?别急,闰土给大家截一张官网图片看看便一目了然了:

图片描述

大意是:一个简单的内存文件系统。将数据保存在JavaScript对象中。

然后,话不多说,先把这两个工具引入进来:

  1. const axios = require('axios')
  2. const MemoryFS = require('memory-fs')
复制代码

紧接着,再来引入两个工具:

  1. const webpack = require('webpack')
  2. const VueServerRenderer = require('vue-server-renderer')
复制代码

因为要在node开发环境中打包代码,并且需要服务端渲染。

接下来,要引入serverConfig,就是入职第一天写的那个配置文件webpack.config.server.js:

  1. const serverConfig = require('../../build/webpack.config.server')
复制代码

然后,如何能在node开发环境中让webpack跑起来呢?

答案是通过serverCompiler:

  1. const serverCompiler = webpack(serverConfig)
复制代码

然后去new一个mfs实例:

  1. const mfs = new MemoryFS()
  2. serverCompiler.outputFileSystem = mfs
复制代码

这样就指定了webpack的输出目录在MemoryFS里面。

有了这些配置之后,再去声明一个bundle:

  1. let bundle
复制代码

用来记录webpack每次打包生成的新的文件。

  1. serverCompiler.watch({}, (err, stats) => {
  2. if (err) throw err
  3. stats = stats.toJson()
  4. stats.erros.forEach(err => console.log(err))
  5. stats.hasWarnings.forEach(warn => console.warn(err))
  6. const bundlePath = path.join(
  7. serverConfig.output.path,
  8. 'vue-ssr-server-bundle.json'
  9. )
  10. bundle = JSON.parse(mfs.readFileSync(bundlePath, 'utf-8'))
  11. })
复制代码

这里使用watch()的好处是:跟使用webpack-dev-server一样,在client目录下每次修改一个文件,它都会重新执行一次打包,然后就可以拿到新的文件了。

serverCompiler.watch()的第一个参数是空对象,第二个参数是一个回调。如果有err直接抛出。

然后stats这块我感觉有点晦涩难懂,leader告诉我说,先照着做,然后有空再去看webpack的文档。

接下来就可以读取生成的bundle文件了,拼接读取文件的路径,设置文件名字,并且制定编码为utf-8,最后通过JSON.parse()将字符串转成JSON。

执行完以上步骤之后,就可以将内容返回给HTML了。

图片描述

在服务端渲染期间,使用ejs模板引擎生成HTML。通过VueServerRenderer的createBundleRenderer()方法帮助生成一个可以直接调用renderer的函数。在这里面接收几个参数,第一个是inject,设置为false,这样它就不会执行其他的注入的操作了。第二个是clientManifest,它会自动生成一个带有script标签的js文件引用的字符串,这样可以直接添加到ejs的内容里面。

最后,dev-ssr.js的完整代码如下:

  1. const Router = require('koa-router')
  2. const axios = require('axios')
  3. const path = require('path')
  4. const fs = require('fs')
  5. const MemoryFS = require('memory-fs')
  6. const webpack = require('webpack')
  7. const VueServerRenderer = require('vue-server-renderer')
  8. const serverConfig = require('../../build/webpack.config.server')
  9. const serverCompiler = webpack(serverConfig)
  10. const mfs = new MemoryFS()
  11. serverCompiler.outputFileSystem = mfs
  12. let bundle
  13. serverCompiler.watch({}, (err, stats) => {
  14. if (err) throw err
  15. stats = stats.toJson()
  16. stats.erros.forEach(err => console.log(err))
  17. stats.hasWarnings.forEach(warn => console.warn(err))
  18. const bundlePath = path.join(
  19. serverConfig.output.path,
  20. 'vue-ssr-server-bundle.json'
  21. )
  22. bundle = JSON.parse(mfs.readFileSync(bundlePath, 'utf-8'))
  23. })
  24. const handleSSR = async (ctx) => {
  25. if (bundle) {
  26. ctx.body = 'wait a moment...'
  27. return
  28. }
  29. const clientManifestResp = await axios.get(
  30. 'http://127.0.0.1:8080/vue-ssr-client-manifest.json'
  31. )
  32. const clientManifest = clientManifestResp.data
  33. const template = fs.readFileSync(
  34. path.join(__dirname, '../server.template.ejs')
  35. )
  36. const renderer = VueServerRenderer
  37. .createBundleRenderer(bundle, {
  38. inject: false,
  39. clientManifest
  40. })
  41. }
复制代码
写在最后

这次使用koa搭建node server的体验只是聊到了renderer这一步,后面我会继续聊聊如何把bundle渲染成实际的HTML内容,并把它添加到template里面。最新的文章都会第一时间更新在我的公众号里面,欢迎关注。



回复

使用道具 举报