服务端渲染react代码页面

首先创建 ssr-react目录，进入ssr-react目录，初始化一个npm项目

mkdir ssr-react
cd ssr-react
npm init -y

在根目录创建src文件夹，在src文件夹下创建server.js

采用node的一个框架 express来写。

首先安装express

yarn add express

接下来用express写一个最简单的服务

const express = require('express');


const app = express();


const port = process.env.port || 3000;

app.get('*', (req, res) => {
    res.writeHead(200,{
        'content-type': 'text/html;charset=utf8'
    })
    res.end('你好ssr')
})

app.listen(port, () => {
    console.log('http://localhost:3000')
})

写完以后运行 node src/server.js就能在http://localhost:3000 看到页面上的输入

因为要做服务端渲染，要在server.js中引入React等前端的包，也就是import，但是 node不认识 import

这个时候我们使用webpack来让node认识import

在根目录创建config文件夹，在config文件夹创建webpack.server.js

const path = require('path')
const webpackExternals = require('webpack-node-externals')
module.exports = {
    target: 'node',
    mode: process.env.NODE_ENV === 'production' ? 'production': 'development',
    entry: path.resolve(__dirname,'../src/server.js'),
    output: {
        path: path.resolve(__dirname,'../dist'),
        filename: 'bundle_server.js'
    },
    module: {
        rules: [
            {
                test: /.js$/,
                loader: 'babel-loader',
                exclude: '/node_modules/'
            }
        ]
    },
    externals: [webpackExternals()] // 不会把node_module中的源码打包
}

这里同时使用了webpack-node-externals这个插件，这个插件功能是在webpack打包的时候，不打包node_modules里面的源码。

为了在node中适配react和ES6的高级语法，我们需要使用babel来编译，安装babel插件

yarn add @babel/core @babel/preset-env "@babel/preset-react babel-loader

同时在根目录创建.babelrc文件

{
    "presets": [
        "@babel/preset-react",
        "@babel/preset-env"
    ]
}

接着编写下scripts命令

"scripts": {
    "webpack:server": "webpack --config ./config/webpack.server.js --watch",
    "webpack:start": "nodemon --watch dist --exec node dist/bundle_server.js",
    "dev": "npm-run-all --parallel webpack:*"
  },

1.webpack:server 这个命令来打包入口文件 server.js

2.webpack:start 这个命令来监听打包后的 bundle_server.js

3.dev 这个命令，使用npm-run-all第三方库来监听所有的命令

react服务端渲染-01

服务端渲染react代码页面