5.开发时服务端渲染

2024年3月9日 189次阅读来源: geology

由于配置了webpack-dev-server，客户端启动时，就不必再本地生成dist目录。但是服务器端的编译还是需要本地的dist目录，所以本节我们将会配置服务端的内容，使得服务端也不用依赖本地的dist目录。

开发时的服务端配置

以前server.js中要依赖本地dist中的文件，所以首先要对其进行更改。

const static = require('./util/dev-static')

const isDev = process.env.NODE_ENV === 'development'  // 增加环境的判断

const app =express()

if(!isDev) {
  // 生产环境，和以前的处理方式一样
  const serverEntry = require('../dist/server-entry').default

  // 配置静态文件目录
  app.use('/public', express.static(path.join(__dirname, '../dist')))

  const template = fs.readFileSync(path.join(__dirname, '../dist/index.html'), 'utf-8')
  // https://blog.csdn.net/qq_41648452/article/details/80630598
  app.get('*', function(req, res) {
    const appString = ReactSSR.renderToString(serverEntry)
    res.send(template.replace('<!-- <app /> -->', appString))
  })
} else {
  // 开发环境，进行单独的处理
  static(app)
}

开发环境中的static方法，位于server/util/dev-static.js中，接受一个app参数。按照生产模式的处理逻辑，开发模式下的配置也分为如下几点：

获取打包好的入口文件，即server-entry.js文件
获取模板文件
将模板文件中的内容替换为server-entry.js中的内容，返回给客户端
对静态文件的请求进行处理。

获取模板文件

获取模板文件最简单，所以最先解决这个问题。配置客户端的devServer时，再http://localhost:8888下面就可以访问到index.html文件，调用下面getTemplate方法就可以拿到模板文件。

const axios = require('axios')

const getTemplate = () => {
  return new Promise((resolve, reject) => {
    axios.get('http://localhost:8888/public/index.html')
      .then(res => {
        resolve(res.data)
      })
      .catch(reject)
  })
}

获取server-entry.js文件

获取服务端的文件，我们需要用到memory-fs包，直接再内存中生成打包好的文件，读取速度更快，那要怎么配置呢？

const path = require('path')
const webpack = require('webpack')
const MemoryFs = require('memory-fs')

const serverConfig = require('../../build/webpack.config.server') // 读取配置文件
// webpack(serverConfig)和我们的build:server命令类似
const serverCompile = webpack(serverConfig) // webpack处理

const mfs = new MemoryFs()
serverCompile.outputFileSystem = mfs  // 将文件的输出交给mfs;默认应该是node的fs模块
// 监听文件的变化
serverCompile.watch({}, (err, stats) => {
    if(err) throw err
    // stats对象有一些状态信息，如我们编译过程中的一些错误或警告，我们直接将这些信息打印出来
    stats = stats.toJson()
    stats.errors.forEach(err => console.err(err))
    stats.warnings.forEach(warn => console.warn(warn))
    // 通过配置文件获取文件的路径和名称
    const bundlePath = path.join(
      serverConfig.output.path,
      serverConfig.output.filename
    )
    // 读取文件的内容
    const bundle = mfs.readFileSync(bundlePath, 'utf-8')
})

所以服务端文件也获取到了？其实还是有问题的，我们获取的仅仅是字符串，并不是node中的一个模块（如果听不懂，先去补补node中模块的概念），所以还需要做进一步的处理。

const Module = module.constructor// node中，每个文件中都有一个Module变量，不懂的就要多学习了
const m = new Module() 
m._compile(bundle, serverConfig.output.filename) // 将字符串编译为一个模块
serverBundle = m.exports.default // 这才是我们需要的内容

替换内容

app.get('*', function (req, res) {
    getTemplate().then(template => {
      const content = ReactDomSSR.renderToString(serverBundle)
      res.send(template.replace('<!-- <app /> -->', content))
    })
  })

静态资源处理

和模板文件一样，静态资源我们将会代理到localhost:8888里面去获取

  const proxy = require('http-proxy-middleware')

  app.use('/public', proxy({
    target: 'http://localhost:8888'
  }))

到这里，开发时服务端渲染就完成了。

本小节完整代码位于仓库的2-8分支,觉得有用的可以去start一下。

    原文作者：geology
    原文地址: https://segmentfault.com/a/1190000018758657
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

算法网