Merge pull request #5 from monkeyInShell/dev

Dev

Author: ZhouYK

.babelrc

@@ -1,13 +1,14 @@
 {
-  "presets": [["env", {
+  "presets": [
+    ["env", {
     "targets": {
       "browsers": ["last 2 versions", "safari >= 7"],
       "node": "8.9.3"
     }
   }], "react"],
   "plugins": [
     "transform-class-properties", //解析类属性，静态和实例的属性
-    "syntax-dynamic-import"//不解析动态加载标识符 import()
+    "syntax-dynamic-import"//不解析动态加载标识符 import() node环境无作用，得另想办法
   ],
   "env": {
     "node": {
@@ -16,7 +17,7 @@
         {
           "extensions": [".less", ".sass"]
         }
-      ]]
+      ], "dynamic-import-node"]
     }
   }
 }

README.md

@@ -4,4 +4,5 @@
 ## for production
 > npm run build
 ### start production server
+
 > node bin/www.js

bin/www.js

@@ -2,14 +2,17 @@
  * Created by ink on 2018/3/31.
  */
 if (process.env.NODE_ENV === 'local') {
+  //node运行时生效,同样也会去读.babelrc，plugins不会覆盖，会concat生效
+  //webpack生效的配置是.babelrc
   require('babel-register')({
     'plugins': [
       [
         'babel-plugin-transform-require-ignore',
         {
           extensions: ['.less']
         }
-      ]
+      ],
+      'dynamic-import-node'
     ]
   })
 }

client/components/Dashboard/Dashboard.less renamed to client/Components/Dashboard/Dashboard.less

@@ -3,7 +3,7 @@
  */
 import React from 'react';
 import Hoc from '../hoc/Hoc';
-import Dashboard from '../../../components/Dashboard';
+import Dashboard from '../../../Components/Dashboard';
 import './index.less';
 class Index extends Hoc {
   constructor (options) {

client/components/Dashboard/img/dashboardtext.png renamed to client/Components/Dashboard/img/dashboardtext.png

@@ -3,7 +3,7 @@
  */
 import React from 'react';
 import Hoc from '../hoc/Hoc';
-import ImgUpload from '../../../components/ImgUpload';
+import ImgUpload from '../../../Components/ImgUpload';
 import './index.less';
 class Index extends Hoc {
   constructor (options) {

client/components/Dashboard/index.js renamed to client/Components/Dashboard/index.js

@@ -3,7 +3,7 @@
  */
 import React from 'react';
 import './index.less';
-import ItemMove from '../../../components/ItemMove';
+import ItemMove from '../../../Components/ItemMove';
 import Hoc from '../hoc/Hoc';
 class Index extends Hoc {
   constructor (options) {

client/components/ImgUpload/ImgUpload.less renamed to client/Components/ImgUpload/ImgUpload.less

@@ -3,7 +3,7 @@
  */
 import React from 'react';
 import Hoc from '../hoc/Hoc';
-import PullRefresh from '../../../components/PullRefresh';
+import PullRefresh from '../../../Components/PullRefresh';
 import './index.less';
 class Index extends Hoc {
   constructor (options) {

client/components/ImgUpload/exif-js.js renamed to client/Components/ImgUpload/exif-js.js

@@ -2,7 +2,7 @@
  * Created by zhouyunkui on 2017/6/9.
  */
 import React from 'react';
-import {Slide, SlideItem, } from '../../../components/Slide';
+import {Slide, SlideItem, } from '../../../Components/Slide';
 import Hoc from '../hoc/Hoc';
 import './index.less';
 class Index extends Hoc {

client/components/ImgUpload/index.js renamed to client/Components/ImgUpload/index.js

@@ -4,7 +4,7 @@
 import React from 'react'
 import './index.less'
 import Hoc from '../hoc/Hoc'
-import Staff from '../../../components/Staff'
+import Staff from '../../../Components/Staff'
 class Index extends Hoc {
   constructor (options) {
     super(options)

client/components/ItemMove/ItemMove.less renamed to client/Components/ItemMove/ItemMove.less

@@ -4,7 +4,7 @@
 import React from 'react'
 import Hoc from '../hoc/Hoc'
 import './index.less'
-import UploadMore from '../../../components/UploadMore'
+import UploadMore from '../../../Components/UploadMore'
 class Index extends Hoc {
   constructor (options) {
     super(options)

client/components/ItemMove/index.js renamed to client/Components/ItemMove/index.js

@@ -2,10 +2,12 @@
  * Created by ink on 2018/4/8.
  */
 import React, {Fragment} from 'react'
-import Center from './Center'
-import Home from './Home'
+import Loading from './Components/Loading'
 import {Switch, Route, Link} from 'react-router-dom'
-
+import load from '../tools/lazyLoad/'
+const lazyLoad = load('integration/', Loading)
+const Home = lazyLoad('Home')
+const Center = lazyLoad('Center')
 const App = (props) => {
   return (
     <Fragment>

client/components/PullRefresh/PullRefresh.less renamed to client/Components/PullRefresh/PullRefresh.less

@@ -0,0 +1,18 @@
+/**
+ * Created by ink on 2018/4/11.
+ */
+import React from 'react'
+function Loading(props) {
+  let content = ''
+  if (props.error) {
+    content = props.error
+  } else if (props.timedOut) {
+    content = '加载超时'
+  } else if (props.pastDelay) {
+    content = '加载中...'
+  } else {
+    content = '加载中...'
+  }
+  return <div>{content}</div>
+}
+export default Loading

client/components/PullRefresh/index.js renamed to client/Components/PullRefresh/index.js

@@ -0,0 +1,19 @@
+/**
+ * Created by ink on 2018/4/11.
+ */
+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
+  return <Loading {...props}/>
+}
+export default (prefix, Loading) => path => {
+  return Loadable({
+    loader: () => import(`../../${prefix}${path}`),
+    loading: loadingComponent(Loading),
+    timeout: 10000
+  })
+}

client/components/Slide/Slide.less renamed to client/Components/Slide/Slide.less

@@ -13,6 +13,7 @@
     "babel-cli": "^6.26.0",
     "babel-eslint": "^8.2.2",
     "babel-loader": "^7.1.4",
+    "babel-plugin-dynamic-import-node": "^1.2.0",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-require-ignore": "^0.1.1",
@@ -36,6 +37,7 @@
     "less-loader": "^4.1.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
+    "react-loadable": "^5.3.1",
     "react-redux": "^5.0.7",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",

client/components/Slide/img/slide-0.jpg renamed to client/Components/Slide/img/slide-0.jpg

@@ -40,7 +40,7 @@ if (process.env.NODE_ENV === 'local') {
 }
 
 //以路径名称作为页面区分
-app.use('/components', extractMapping, (req, res, next) => {
+app.use('/Components', extractMapping, (req, res, next) => {
   //可以根据路径，针对某一个页面进行服务端渲染
   const content = renderToString(<StaticRouter
     location={req.url}

client/components/Slide/img/slide-2.jpg renamed to client/Components/Slide/img/slide-2.jpg

@@ -4,6 +4,7 @@
 const path = require('path')
 const webpack = require('webpack')
 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')
@@ -31,7 +32,8 @@ const config = {
       'process.env.NODE_ENV': JSON.stringify('production')
     }),
     new ExtractCssChunks({
-      filename: '[name].[id].css'
+      filename: '[name].[id].css',
+      allChunks: true
     }),
     ...commonConfig.plugins
   ]