- 用了webpack的stage-0进行打包所以可以支持使用es6 modules语法
import React from "react" const Home = () => { return <div>Home1233333</div> } export default Home;
- 借助react-dom提供的renderToString方法完成组件到字符串的转换
import React from 'react'; import { renderToString } from 'react-dom/server' import Home from './containers/Home' app.get("/",(req,res)=>{ res.send(renderToString(<Home />)) })
- 直接渲染的home在浏览器端显示只是一个dom节点
我们最好拼接为html模板返回var home = renderToString(<Home />); app.get("/",(req,res)=>{ res.send(`<html> <head> <title>服务端渲染</title> </head> <body> ${home} </body> </html>`) })
- webpack添加--watch参数，完成对入口文件以及依赖文件的监听 实现自动重新打包
- nodemo安装 实现监听文件/文件夹 实现自动重启
"start": "nodemon --watch build --exec node "./build/bundle.js"", "build": "webpack --config webpack.server.js --watch"nodemon --watch参数表示监听的对象 --exec参数表示对象变化之后执行的命令 后面的文件路径需要加双引号，由于外层有引号，使用 进行转义
- 安装npm-run-all来同时实现两个命令(--parallel参数代表并行执行)https://www.npmjs.com/package/npm-run-all
"dev": "npm-run-all --parallel dev:**", "dev:start": "nodemon --watch build --exec node "./build/bundle.js"", "dev:build": "webpack --config webpack.server.js --watch"
项目地址：git@github.com:longlongdan/Reactssr.git