去除模板引擎，以react来渲染页面

Author: yunkui.zhou

package.json

@@ -30,7 +30,6 @@
     "eslint-plugin-standard": "^3.0.1",
     "express": "^4.16.3",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
-    "hbs": "^4.0.1",
     "history": "^4.7.2",
     "less": "^3.0.1",
     "less-loader": "^4.1.0",
@@ -55,7 +54,6 @@
     "babel-plugin-transform-es3-property-literals": "^6.22.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-register": "^6.26.0",
-    "html-webpack-plugin": "^3.1.0",
     "mocha": "^5.0.5",
     "nodemon": "^1.17.2",
     "redux-devtools": "^3.4.1",

server/config/development.js

@@ -23,7 +23,10 @@ const injectDevelopmentTools = (app) => {
   }))
   app.use(webpackDevMiddleware(compiler, {
     publicPath: config.output.publicPath,
-    serverSideRender: true
+    serverSideRender: true,
+    headers: {
+      'Cache-Control': 'max-age=36000'
+    }
   }))
   return '本地开发链接webpack与node服务'
 }

server/controller/components.js

@@ -1,27 +1,31 @@
 'use strict';
 
 import React from 'react'
-import {renderToString} from 'react-dom/server'
-import mapAssets from '../utils/mapAssets'
+import {toSream, setResHeaders} from '../react'
+import mapReactAssets from '../utils/mapReactAssets'
 import Component from '../../client/pages/example/App'
+import Skeleton from '../react/skeleton'
 import {StaticRouter} from 'react-router'
 import express from 'express'
 const router = express.Router()
 router.get('*', (req, res, next) => {
   //可以根据路径，针对某一个页面进行服务端渲染
   const location = `${req.baseUrl}${req.path}`
-  console.log(req.path)
-  const content = renderToString(<StaticRouter
-    location={location}
-    context={{}}
-    basename={req.baseUrl}>
-    <Component/>
-  </StaticRouter>)
-  res.render('components', {
-    app: content,
-    links: mapAssets('components/index.css'),
-    scripts: mapAssets('components/index.js')
-  })
+  const Html = (props) => (
+    <Skeleton
+      title="react移动端组件"
+      links={mapReactAssets('components/index.css')}
+      scripts={mapReactAssets('components/index.js')}
+    >
+      <StaticRouter
+        location={location}
+        context={{}}
+        basename={req.baseUrl}>
+        <Component/>
+      </StaticRouter>
+    </Skeleton>
+  )
+  toSream(<Html />).pipe(setResHeaders(res))
 })
 
 export default {

server/controller/integration.js

@@ -1,9 +1,10 @@
-'use strict'
+'use strict';
 
 import express from 'express'
 import React from 'react'
-import {renderToString} from 'react-dom/server'
-import mapAssets from '../utils/mapAssets'
+import {toSream, setResHeaders} from '../react'
+import Skeleton from '../react/skeleton'
+import mapReactAssets from '../utils/mapReactAssets'
 import {StaticRouter} from 'react-router'
 import {Provider} from 'react-redux'
 import store from '../../client/pages/tools/store/forServer'
@@ -14,20 +15,24 @@ import Integration from '../../client/pages/integration/App'
 const router = express.Router()
 router.get('*', (req, res, next) => {
   const location = `${req.baseUrl}${req.path}`
-  const content = renderToString(<Provider store={store(reducers)}>
-    <StaticRouter
-      location={location}
-      context={{}}
-      basename={req.baseUrl}
+  const Html = (props) => (
+    <Skeleton
+      title="整合redux"
+      links={mapReactAssets('integration/index.css')}
+      scripts={mapReactAssets('integration/index.js')}
     >
-      <Content component={Integration}/>
-    </StaticRouter>
-  </Provider>)
-  res.render('integration', {
-    app: content,
-    links: mapAssets('integration/index.css'),
-    scripts: mapAssets('integration/index.js')
-  })
+      <Provider store={store(reducers)}>
+        <StaticRouter
+          location={location}
+          context={{}}
+          basename={req.baseUrl}
+        >
+          <Content component={Integration}/>
+        </StaticRouter>
+      </Provider>
+    </Skeleton>
+  )
+  toSream(<Html />).pipe(setResHeaders(res))
 })
 
 export default {

server/index.js

@@ -7,9 +7,15 @@ import pages from './routes/pages'
 const config = require('config')
 const app = express()
 console.log(config.injectDevelopmentTools && config.injectDevelopmentTools(app))
-app.set('views', path.join(__dirname, 'views'));
-app.set('view engine', 'hbs')
-app.use(express.static(path.resolve(__dirname, '../public')))
+const options = {
+  dotfiles: 'ignore',
+  etag: true,
+  extensions: ['htm', 'html'],
+  index: false,
+  maxAge: 3600 * 24 * 7 * 1000,
+  redirect: false
+}
+app.use(express.static(path.resolve(__dirname, '../public'), options))
 
 //页面链式路由入口
 app.use('/p', pages)

server/react/index.js

@@ -0,0 +1,10 @@
+'use strict';
+import {renderToString, renderToNodeStream} from 'react-dom/server'
+
+export const toString = (reactElement) => renderToString(reactElement)
+export const toSream = (reactElement) => renderToNodeStream(reactElement)
+export const setResHeaders = (res) => res.set({
+  'Content-Type': 'text/html',
+  'Cache-Control': 'no-cache,no-store',
+  'Expires': -1
+})

server/react/skeleton.js

@@ -0,0 +1,21 @@
+'use strict';
+import React from 'react'
+
+const Skeleton = (props) => {
+  return (<html lang="zh-cn">
+    <head>
+      <meta charSet="utf-8"/>
+      <meta name="description" content="react app"/>
+      <meta httpEquiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
+      <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
+      <meta name="format-detection" content="telephone=no"/>
+      <title>{props.title}</title>
+      {props.links}
+    </head>
+    <body>
+      <div id="bd" className="bd">{props.children}</div>
+      {props.scripts}
+    </body>
+  </html>)
+}
+export default Skeleton

server/routes/pages.js

@@ -1,8 +1,8 @@
 /**
  * Created by ink on 2018/5/3.
  */
-import extractMapping from '../middleware/extractMapping'
 import express from 'express'
+import extractMapping from '../middleware/extractMapping'
 
 import integrationController from '../controller/integration'
 import componentsController from '../controller/components'

server/utils/mapReactAssets.js

@@ -0,0 +1,19 @@
+'use strict';
+import React from 'react'
+const mapReactAssets = (key) => {
+  let mapObj = global.staticAssetsMapping
+  if (typeof global.staticAssetsMapping === 'string' && global.staticAssetsMapping) {
+    mapObj = JSON.parse(global.staticAssetsMapping)
+  }
+  const value = mapObj[key]
+  const jsMatch = /\.js$/
+  const cssMath = /\.css$/
+  let srcString = ''
+  if (jsMatch.test(value)) {
+    srcString = <script src={value}></script>
+  } else if (cssMath.test(value)) {
+    srcString = <link rel="stylesheet" href={value} />
+  }
+  return srcString
+}
+export default mapReactAssets

server/utils/mapAssets.js server/utils/mapStringAssets.jsserver/utils/mapAssets.js renamed to server/utils/mapStringAssets.js

@@ -1,7 +1,7 @@
 /**
  * Created by ink on 2018/4/3.
  */
-const mapAssets = (key) => {
+const mapStringAssets = (key) => {
   let mapObj = global.staticAssetsMapping
   if (typeof global.staticAssetsMapping === 'string' && global.staticAssetsMapping) {
     mapObj = JSON.parse(global.staticAssetsMapping)
@@ -17,4 +17,4 @@ const mapAssets = (key) => {
   }
   return srcString
 }
-export default mapAssets
+export default mapStringAssets