zoukankan html css js c++ java

react服务端渲染（四）实现服务端组件渲染与自动重启

用了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

查看全文

相关阅读:
node.js之npm命令安装扩展模块
 jquery选择器(转)
node.js入门
 node.js之模块
 redhat 下装redis
html 5之websocket(转)
node.js安装和环境搭建
 javascript 动态加载脚本库
 HTML5 LocalStorage 本地存储
 【ecmascript】 ECMAScript 6概览【转】

原文地址：https://www.cnblogs.com/longlongdan/p/11271537.html