调整路由结构

Author: yunkui.zhou

client/pages/example/common/js/preventDocMove.js

@@ -1,18 +1,18 @@
 /**
  * Created by zhouyunkui on 2017/6/23.
  */
-const fnc = function( evt ) {
-  if ( this.preventDocMove ) {
+const fnc = function (evt) {
+  if (this.preventDocMove) {
     evt.preventDefault();
     return false;
   }
 }
 export const preventDocMove = function () {
-  //测试
-  document.addEventListener( 'touchmove', fnc.bind( this ), {
+  // 测试
+  document.addEventListener('touchmove', fnc.bind(this), {
     passive: false
-  } );
-}
+  })
+};
 export const offPreventDefault = function () {
-  document.removeEventListener( 'touchmove', fnc );
-}
+  document.removeEventListener('touchmove', fnc)
+};

client/pages/example/common/js/siderStatusSwitch.js

@@ -2,12 +2,12 @@
  * Created by zhouyunkui on 2017/6/15.
  */
 const switchStatus = function () {
-  const { match } = this.props;
-  let targetLink = document.querySelector(`.flag${match.path.replace(/\//g,'-')}`);
+  const {match} = this.props;
+  let targetLink = document.querySelector(`.flag${match.path.replace(/\//g, '-')}`);
   let allLink = [ ...document.querySelectorAll('.sider .top-component')];
-  allLink.map( ( link, index ) => {
-    link.classList.remove( 'active' );
+  allLink.map((link, index) => {
+    link.classList.remove('active');
   })
   targetLink.classList.add('active');
 }
-export default switchStatus;
+export default switchStatus

client/pages/integration/redux/action.js

@@ -16,4 +16,4 @@ export function center(data = '') {
 }
 export function jump(path = '') {
   return push(path)
-}
+}

client/pages/integration/redux/reducer.js

@@ -17,4 +17,4 @@ export function home (state = {title: '个人首页内容'}, action) {
     default:
       return state
   }
-}
+}

client/pages/tools/lazyLoad/index.js

@@ -4,16 +4,16 @@
 import React from 'react'
 import Loadable from 'react-loadable'
 const loadingComponent = Loading => props => {
-  //props.error:When the loader has errored
-  //props.timedOut: When the loader has taken longer than the timeout
-  //props.pastDelay: When the loader has taken longer than the delay
-  //else: When the loader has just started
+  // props.error:When the loader has errored
+  // props.timedOut: When the loader has taken longer than the timeout
+  // props.pastDelay: When the loader has taken longer than the delay
+  // else: When the loader has just started
   return <Loading {...props}/>
-}
+};
 export default (prefix, Loading) => path => {
   return Loadable({
     loader: () => import(`../../${prefix}${path}`),
     loading: loadingComponent(Loading),
     timeout: 10000
   })
-}
+};

server/config/development.js

@@ -11,7 +11,7 @@ require('babel-register')({
   ]
 })
 const injectDevelopmentTools = (app) => {
-  const config = require('../../webpack.config.local')
+  const config = require('../../webpack.config.dev.babel')
   const webpack = require('webpack')
   const compiler = webpack(config)
   const webpackDevMiddleware = require('webpack-dev-middleware')

server/controller/components.js

@@ -0,0 +1,29 @@
+'use strict';
+
+import React from 'react'
+import {renderToString} from 'react-dom/server'
+import mapAssets from '../utils/mapAssets'
+import Component from '../../client/pages/example/App'
+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')
+  })
+})
+
+export default {
+  router
+}

server/controller/integration.js

@@ -0,0 +1,35 @@
+'use strict'
+
+import express from 'express'
+import React from 'react'
+import {renderToString} from 'react-dom/server'
+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 reducers from '../../client/pages/integration/store/'
+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}
+    >
+      <Content component={Integration}/>
+    </StaticRouter>
+  </Provider>)
+  res.render('integration', {
+    app: content,
+    links: mapAssets('integration/index.css'),
+    scripts: mapAssets('integration/index.js')
+  })
+})
+
+export default {
+  router
+}

server/middleware/extractMapping.js

@@ -3,12 +3,12 @@
  * global.staticAssetsMapping
  */
 import path from 'path'
-const {NODE_ENV} = process.env
+const config = require('config')
 const mappingRealativePath = '../../public/mapping/mapping.json'
 const mappingRealPath = path.resolve(__dirname, mappingRealativePath)
 let mapping = {}
 const extractMapping = (req, res, next) => {
-  if (NODE_ENV === 'local') {
+  if (config.env === 'development') {
     mapping = res.locals.webpackStats.compilation.assets['mapping.json'].source()
   } else {
     // 每次请求清除模块缓存

server/routes/pages.js

@@ -1,57 +1,19 @@
 /**
  * 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'
+
+import integrationController from '../controller/integration'
+import componentsController from '../controller/components'
 const router = express.Router()
 
 router.get('/', (req, res) => {
   res.status(301).set('Location', '/').end()
 })
 
-router.get('/integration(/:page)?', extractMapping, (req, res, next) => {
-  const location = `${req.baseUrl}${req.path}`
-  const content = renderToString(<Provider store={store(reducers)}>
-    <StaticRouter
-      location={location}
-      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.use('/integration', extractMapping, integrationController.router)
+
+router.use('/components', extractMapping, componentsController.router)
 
-router.get('/components(/:page)?', extractMapping, (req, res, next) => {
-  //可以根据路径，针对某一个页面进行服务端渲染
-  const location = `${req.baseUrl}${req.path}`
-  const content = renderToString(<StaticRouter
-    location={location}
-    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/views/components.hbs

@@ -1,5 +1,8 @@
-<html>
+<html lang="zh-cn">
     <head>
+        <meta charset="utf-8"/>
+        <meta name="description" content="react app"/>
+        <meta http-equiv="X-UA-Compatible" conent="IE=Edge,chrome=1"/>
         <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1" />
         <title>{{title}}</title>
         {{{links}}}

webpack.config.js renamed to webpack.config.babel.js

@@ -1,8 +1,8 @@
 const NODE_ENV = process.env.NODE_ENV
 let config
 if (NODE_ENV === 'local') {
-  config = require('./webpack.config.local')
+  config = require('./webpack.config.dev.babel')
 } else {
-  config = require('./webpack.config.pro')
+  config = require('./webpack.config.prod.babel')
 }
 module.exports = config

webpack.config.common.js renamed to webpack.config.common.babel.js

@@ -10,7 +10,7 @@ const entry = {
 }
 const rules = [{
   enforce: 'pre',
-  test: '/\.jsx?$/',
+  test: /\.jsx?$/,
   exclude: /node_modules/,
   use: ['eslint-loader']
 }, {

webpack.config.local.js renamed to webpack.config.dev.babel.js

@@ -4,7 +4,7 @@
 const path = require('path')
 const webpack = require('webpack')
 const contentPath = path.resolve(__dirname, 'public')
-const commonConfig = require('./webpack.config.common')
+const commonConfig = require('./webpack.config.common.babel')
 const publicPath = '/'
 const copyEntry = Object.assign({}, commonConfig.entry)
 const entry = {}
@@ -13,7 +13,7 @@ Object.keys(copyEntry).map(item => {
   temp.unshift('webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&reload=true')
   entry[item] = temp
 })
-console.log('读取webpack devConfig')
+console.log('读取webpack.config.dev.babel.js')
 const config = {
   mode: 'development',
   devtool: 'eval-source-map',

webpack.config.pro.js renamed to webpack.config.prod.babel.js

@@ -7,7 +7,7 @@ const contentPath = path.resolve(__dirname, 'dist/public/mapping')
 //extract-text-webpack-plugin 还是beta版有bug，不同入口的css内容都一样
 const ExtractCssChunks = require('extract-text-webpack-plugin')
 const publicPath = '/mapping/'
-const commonConfig = require('./webpack.config.common')
+const commonConfig = require('./webpack.config.common.babel')
 console.log('读取webpack production')
 const config = {
   mode: 'production',