添加readme；调整路由结构

Author: yunkui.zhou

.babelrc

@@ -11,6 +11,7 @@
     "syntax-dynamic-import"//不解析动态加载标识符 import() node环境无作用，得另想办法
   ],
   "env": {
+    //这个配置只针对服务端的客户端代码
     "node": {
       "plugins": [[
         "babel-plugin-transform-require-ignore",

README.md

@@ -1,8 +1,8 @@
-# server-side-render
-## for development
+# 服务端渲染同构框架
+
+## 本地开发
 > npm run start
-## for production
+
+## 生产打包
 > npm run build
-### start production server
 
-> node bin/www.js

bin/README.md

@@ -0,0 +1,5 @@
+## 启动文件
+
+*   www
+
+    > 服务器入口文件，里面针对开发环境node端的babel编译做了配置

bin/www

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 if (process.env.NODE_ENV === 'local') {
-  //node运行时生效,同样也会去读.babelrc，plugins不会覆盖，会concat生效
-  //webpack生效的配置是.babelrc
+  //由于运行时不会设置BABEL_ENV = node，单独为node运行时设置插件处理
+  //这里如果统一设置BABEL_ENV = node，导致webpack内babel运行时也会去读取env: node的配置
   require('babel-register')({
     'plugins': [
       [

client/pages/example/index.js

@@ -7,7 +7,7 @@ import ReactDom from 'react-dom'
 import {BrowserRouter} from 'react-router-dom'
 import App from './App'
 ReactDom.hydrate(
-  <BrowserRouter basename='/components'>
+  <BrowserRouter basename='/p/components'>
     <App/>
   </BrowserRouter>
   , document.getElementById('bd'))

client/pages/integration/App.js

@@ -12,7 +12,7 @@ const App = (props) => {
   return (
     <Fragment>
       <div>
-        <Link to='/home'>首页</Link>
+        <Link to='/home'>个人主页</Link>
       </div>
       <div>
         <Link to='/center'>用户中心</Link>

client/pages/integration/Center/index.js

@@ -7,7 +7,7 @@ import connect from '../../tools/connect'
 
 class Center extends Component {
   render () {
-    return (<div>欢迎来到个人中心</div>)
+    return (<div>{this.props.title}</div>)
   }
 }
 export default connect({

client/pages/integration/Home/index.js

@@ -5,12 +5,9 @@ import React, {Component} from 'react'
 import connect from '../../tools/connect'
 import * as actions from '../redux/action'
 class Home extends Component {
-  constructor(options) {
-    super(options)
-  }
   componentDidMount() {
     setTimeout(() => {
-      this.props.actions.home('我是首页')
+      this.props.actions.home('个人主页内容展示')
       //通过action出发路由跳转
       //this.props.actions.jump('center')
     }, 2000)

client/pages/integration/index.js

@@ -8,7 +8,7 @@ import App from './App'
 import storeFactory, {historyConf} from '../tools/store/forBrowser'
 import reducers from './store/'
 const history = historyConf({
-  basename: '/integration'
+  basename: '/p/integration'
 })
 const store = storeFactory(reducers, history)
 

client/pages/integration/redux/reducer.js

@@ -10,7 +10,7 @@ export function center (state = {title: '欢迎来到个人中心'}, action) {
   }
 }
 
-export function home (state = {title: '默认首页'}, action) {
+export function home (state = {title: '个人首页内容'}, action) {
   switch (action.type) {
     case 'home_title':
       return Object.assign({}, state, {title: action.data})

server/README.md

@@ -0,0 +1,5 @@
+# 服务端文件说明
+
+## index.js
+
+> 服务端主文件，基础配置都在这里

server/index.js

@@ -3,24 +3,11 @@
  */
 import express from 'express'
 import path from 'path'
-
-import React from 'react'
-import {renderToString} from 'react-dom/server'
-
-import Component from '../client/pages/example/App'
-import extractMapping from './middleware/extractMapping'
-import mapAssets from './utils/mapAssets'
-import {StaticRouter} from 'react-router'
-
-import {Provider} from 'react-redux'
-import store from '../client/pages/tools/store/forServer'
-import {Content} from '../client/pages/integration/Root/index'
-import Integration from '../client/pages/integration/App'
-import reducers from '../client/pages/integration/store/'
+import pages from './routes/pages'
 const app = express()
 app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'hbs')
-app.use(express.static(path.resolve(__dirname, '../public')))
+app.get(express.static(path.resolve(__dirname, '../public')))
 
 if (process.env.NODE_ENV === 'local') {
   const config = require('../webpack.config.local')
@@ -38,37 +25,18 @@ if (process.env.NODE_ENV === 'local') {
     serverSideRender: true
   }))
 }
-
-//以路径名称作为页面区分
-app.use('/Components', extractMapping, (req, res, next) => {
-  //可以根据路径，针对某一个页面进行服务端渲染
-  const content = renderToString(<StaticRouter
-    location={req.url}
-    context={{}}
-    basename="/components">
-    <Component/>
-  </StaticRouter>)
-  res.render('components', {
-    app: content,
-    links: mapAssets('components/index.css'),
-    scripts: mapAssets('components/index.js')
+//页面链式路由入口
+app.use('/p', pages)
+//首页
+app.get('/', (req, res) => {
+  res.render('homepage', {
+    title: 'react-redux-iapp同构项目'
   })
 })
-
-app.use('/integration', extractMapping, (req, res, next) => {
-  const content = renderToString(<Provider store={store(reducers)}>
-    <StaticRouter
-      location={req.url}
-      context={{}}
-      basename="/integration"
-    >
-      <Content component={Integration}/>
-    </StaticRouter>
-  </Provider>)
-  res.render('integration', {
-    app: content,
-    links: mapAssets('integration/index.css'),
-    scripts: mapAssets('integration/index.js')
+app.use((req, res, next, err) => {
+  res.json({
+    message: '404',
+    err: err
   })
 })
 export default app

server/middleware/README.md

@@ -0,0 +1,5 @@
+## 中间件
+
+*   extractMapping.js
+
+    > 用于读取webpack生成的资源映射文件

server/routes/README.md

@@ -0,0 +1,4 @@
+## 路由
+
+*   pages.js
+    > 处理页面路由，服务端渲染之所在

server/routes/pages.js

@@ -0,0 +1,55 @@
+/**
+ * Created by ink on 2018/5/3.
+ */
+
+import React from 'react'
+import {renderToString} from 'react-dom/server'
+import Component from '../../client/pages/example/App'
+import extractMapping from '../middleware/extractMapping'
+import mapAssets from '../utils/mapAssets'
+import {StaticRouter} from 'react-router'
+
+import {Provider} from 'react-redux'
+import store from '../../client/pages/tools/store/forServer'
+import {Content} from '../../client/pages/integration/Root/index'
+import Integration from '../../client/pages/integration/App'
+import reducers from '../../client/pages/integration/store/'
+import express from 'express'
+const router = express.Router()
+
+router.get('/', (req, res) => {
+  res.status(301).set('Location', '/').end()
+})
+
+router.get('/integration(/:page)?', extractMapping, (req, res, next) => {
+  const content = renderToString(<Provider store={store(reducers)}>
+    <StaticRouter
+      location={req.originalUrl}
+      context={{}}
+      basename="/p/integration"
+    >
+      <Content component={Integration}/>
+    </StaticRouter>
+  </Provider>)
+  res.render('integration', {
+    app: content,
+    links: mapAssets('integration/index.css'),
+    scripts: mapAssets('integration/index.js')
+  })
+})
+
+router.get('/components(/:page)?', extractMapping, (req, res, next) => {
+  //可以根据路径，针对某一个页面进行服务端渲染
+  const content = renderToString(<StaticRouter
+    location={req.originalUrl}
+    context={{}}
+    basename="/p/components">
+    <Component/>
+  </StaticRouter>)
+  res.render('components', {
+    app: content,
+    links: mapAssets('components/index.css'),
+    scripts: mapAssets('components/index.js')
+  })
+})
+export default router

server/utils/README.md

@@ -0,0 +1,4 @@
+## 工具
+
+*   mapAssets.js
+    > 用于生成script和link标签字符串

server/views/README.md

@@ -0,0 +1,3 @@
+## views
+
+> 模板文件夹，使用的[hbs](https://github.com/pillarjs/hbs)

server/views/components.hbs

@@ -1,7 +1,7 @@
 <html>
     <head>
         <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1" />
-        <title>端</title>
+        <title>{{title}}</title>
         {{{links}}}
     </head>
     <body>

server/views/homepage.hbs

@@ -0,0 +1,21 @@
+<html>
+<head>
+    <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1" />
+    <title>{{title}}</title>
+    <style>
+        a{
+            text-decoration: none;
+        }
+    </style>
+</head>
+<body>
+<nav style="text-align: center;padding: 20px 10px">
+    <a href="/p/components">
+        组件示例（不包含redux）
+    </a>
+    <a href="/p/integration">
+        集成redux示例
+    </a>
+</nav>
+</body>
+</html>

server/views/integration.hbs

@@ -1,7 +1,7 @@
 <html>
     <head>
         <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1" />
-        <title>端</title>
+        <title>{{title}}</title>
         {{{links}}}
     </head>
     <body>