feat: update

Author: vnues

README.md

@@ -3,32 +3,31 @@
 服务运行
 
 ```
-npm i 
-npm run dev 
+npm i
+npm run dev
 ```
 
 ## 升级内容
 
-* 前端代码的实时构建
-* 服务端所需代码的实时编译
-* http 服务的自动重启
+- 前端代码的实时构建
+- 服务端所需代码的实时编译
+- http 服务的自动重启
 
 ## 缺陷
 
 页面的显示内容需要刷新一次才能看到。 后续继续优化，增加热更新。
 
-
-
 ## 待做
 
-- 修复构建的strat.js bug
-- server koa===>改造成ts
-- build server 改造成server
+- 修复构建的 strat.js bug
+- server koa===>改造成 ts
+- build server 改造成 server
 - 支持 redux
-- server端引入ejs进行渲染返回 ===> 参考nuxt
+- server 端引入 ejs 进行渲染返回 ===> 参考 nuxt
 - css
 - 按需加载
-- 引用umi文档构建
+- 引用 umi 文档构建
 - 单元测试
+- 8080 所有路由 获取 index 文件然后返回
 
 做成一个完整的项目

build/client/dev-server.js

@@ -3,6 +3,7 @@ const express = require('express')
 const webpack = require('webpack')
 const devMiddleware = require('webpack-dev-middleware')
 const hotMiddleware = require('webpack-hot-middleware')
+
 const webpackConfig = require('./webpack.dev.conf')
 
 const config = require('../../config')
@@ -15,11 +16,12 @@ const main = function () {
     port: getPort.makeRange(port, port + 100)
   }).then(function (newPort) {
     const app = express()
+
     const compiler = webpack(webpackConfig)
 
     const webpackDevMiddleware = devMiddleware(compiler, {
       // logLevel: 'silent',
-      index: true,
+      index: 'index.html',
       publicPath: webpackConfig.output.publicPath
     })
 
@@ -29,16 +31,15 @@ const main = function () {
       path: '/__hmr'
     })
 
-    
-      //设置跨域访问
-      app.all('*', function(req, res, next) {
-        res.header("Access-Control-Allow-Origin", "*");
-        // res.header("Access-Control-Allow-Headers", "X-Requested-With");
-        // res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
-        // res.header("X-Powered-By",' 3.2.1')
-        // res.header("Content-Type", "application/json;charset=utf-8");
-        next();
-      });
+    //设置跨域访问
+    app.all('*', function (req, res, next) {
+      res.header('Access-Control-Allow-Origin', '*')
+      // res.header("Access-Control-Allow-Headers", "X-Requested-With");
+      // res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
+      // res.header("X-Powered-By",' 3.2.1')
+      // res.header("Content-Type", "application/json;charset=utf-8");
+      next()
+    })
 
     app.use(webpackDevMiddleware)
 
@@ -51,6 +52,7 @@ const main = function () {
       config.dev.assetsPublicPath,
       config.base.assetsSubDirectory
     )
+
     app.use(staticPath, express.static('./static'))
 
     console.log('> Starting dev server...')

build/client/webpack.base.conf.js

@@ -1,7 +1,8 @@
 const os = require('os')
 const path = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-const WebpackBar = require('webpackbar');
+const WebpackBar = require('webpackbar')
+const webpack = require('webpack')
 
 // const ProgressBarPlugin = require('progress-bar-webpack-plugin')
 // const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
@@ -39,18 +40,18 @@ module.exports = {
         test: /\.ts|\.tsx/,
         use: [
           {
-            loader: 'babel-loader',
-          },
-        ],
+            loader: 'babel-loader'
+          }
+        ]
       },
       {
         test: /\.ts|\.tsx|\.js|\.json/,
         exclude: /node_modules/,
         loader: 'eslint-loader',
         options: {
           fix: true,
-          cache: true,
-        },
+          cache: true
+        }
       },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
@@ -84,24 +85,30 @@ module.exports = {
     // new ForkTsCheckerWebpackPlugin(),
     new WebpackBar({
       name: 'client',
-      color: "green",
-  }),
+      color: 'green'
+    }),
     new HtmlWebpackPlugin({
       title: config.base.title,
       filename: 'index.html',
       template: path.resolve(__dirname, '../../templates/index.ejs'),
       inject: true
+    }),
+    new webpack.DefinePlugin({
+      'process.env': { NODE_ENV: '"development"' },
+      __IS_PROD__: false,
+      __SERVER__: false
     })
   ],
-    optimization: {
-        splitChunks: {
-            cacheGroups: {
-                libs: { // 抽离第三方库
-                    test: /node_modules/, // 指定是node_modules下的第三方包
-                    chunks: 'initial',
-                    name: 'libs'// 打包后的文件名，任意命名    
-                }
-            }
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        libs: {
+          // 抽离第三方库
+          test: /node_modules/, // 指定是node_modules下的第三方包
+          chunks: 'initial',
+          name: 'libs' // 打包后的文件名，任意命名
         }
-    },
+      }
+    }
+  }
 }

package.json

@@ -54,6 +54,7 @@
 				"@typescript-eslint/parser": "^4.22.0",
 				"babel-loader": "^8.2.2",
 				"clean-webpack-plugin": "^4.0.0-alpha.0",
+				"connect-history-api-fallback": "^1.6.0",
 				"css-loader": "^3.4.0",
 				"eslint": "^7.25.0",
 				"eslint-loader": "^4.0.2",

src/client/components/asyncBundle/index.tsx

@@ -0,0 +1,51 @@
+
+import React from 'react';
+import LoadingCompoent from '../loading'
+
+
+/**
+ * 动态加载组件一个组的容器
+ *
+ * @class Bundle
+ * @extends {Component}
+ */
+export default class AsyncBundle extends React.Component<any, any> {
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      mod: null
+    };
+  }
+
+  componentDidMount() {
+    if (!this.state.mod) {
+      this.load(this.props);
+    }
+  }
+
+  // UNSAFE_componentWillReceiveProps(nextProps) {
+
+  //     //路由改变才会按需
+  //     if (nextProps.match && this.props.match && (nextProps.match.url !== this.props.match.url)) {
+  //         this.load(nextProps);
+  //     }
+  // }
+
+
+  load(props: any) {
+    this.setState({
+      mod: null
+    });
+    //注意这里，使用Promise对象; mod.default导出默认
+    props.load().then((mod: any) => {
+      this.setState({
+        mod: mod.default ? mod.default : mod
+      });
+    });
+  }
+
+  render() {
+    // @ts-ignore
+    return this.state.mod ? this.props.children(this.state.mod) : <LoadingCompoent />;
+  }
+}

src/client/components/asyncLoader/index.tsx

@@ -0,0 +1,19 @@
+//异步加载组件的高阶函数
+
+import AsyncBundle from '../asyncBundle'
+// @ts-ignore
+import proConfig from '../../../common/pro-config.js'
+import React from 'react'
+function AsyncLoader(loader: any) {
+  function asyncFn(props: any) {
+    return <AsyncBundle load={loader}>{(Comp: any) => <Comp {...props} />}</AsyncBundle>
+  }
+
+  //标记为异步组件
+  // @ts-ignore
+  asyncFn[proConfig.asyncComponentKey] = true
+
+  return asyncFn
+}
+
+export default AsyncLoader

src/client/components/container/index.tsx

@@ -0,0 +1,114 @@
+// 高阶组件 用于提取重复逻辑
+
+import React from 'react'
+
+let _this: any = null
+let _isPop = false //是否触发过popState
+let _isMount = false //组件是否挂载完成
+const popStateCallback = () => {
+  // 使用 popStateCallback 保存函数防止 addEventListener 重复注册
+  if (_this && _this.getInitialProps) {
+    console.log('popStateFn')
+    _isPop = true
+    if (_isMount) {
+      //只有当前组件挂载后才能执行数据预取，否则会报错
+      _this.getInitialProps()
+    }
+  }
+}
+
+export default (SourceComponent: any) => {
+  return class HoComponent extends React.Component<any, any> {
+    constructor(props: any) {
+      super(props)
+
+      this.state = {
+        initialData: {},
+        canClientFetch: false // 浏览器端是否需要请求数据
+      }
+    }
+    // 用于服务端调用
+    static async getInitialProps(ctx: any) {
+      return SourceComponent.getInitialProps
+        ? await SourceComponent.getInitialProps(ctx)
+        : {}
+    }
+
+    //用于封装处理
+    async getInitialProps() {
+      // ssr首次进入页面以及csr/ssr切换路由时才调用组件的getInitialProps方法
+      const { match, location } = this.props
+      const res = SourceComponent.getInitialProps
+        ? await SourceComponent.getInitialProps({ match, location })
+        : {}
+      this.setState({
+        initialData: res,
+        canClientFetch: true
+      })
+
+      console.log('getInitialProps')
+      let { tdk } = res.page
+      if (tdk) {
+        document.title = tdk.title
+      }
+    }
+
+    async componentDidMount() {
+      //注册事件，用于在页面回退和前进的时候触发
+      _isMount = true //组件挂载完成
+      // @ts-ignore
+      if (window.__IS__SSR__) {
+        //只有当启用 ssr 时
+        _this = this // 修正_this指向，保证_this指向当前渲染的页面组件
+        //注册事件
+        window.addEventListener('popstate', popStateCallback)
+
+        if (_isPop) {
+          //如果前进或者后退 则需要异步获取数据
+          this.getInitialProps()
+        }
+      }
+
+      const canClientFetch = this.props.history && this.props.history.action === 'PUSH' //路由跳转的时候可以异步请求数据
+      console.log('canClientFetch', canClientFetch)
+      // @ts-ignore
+      if (canClientFetch || !window.__IS__SSR__) {
+        await this.getInitialProps()
+      }
+    }
+
+    componentWillUnmount() {
+      console.log('unmount')
+      _isPop = false //重置为未触发
+      _isMount = false //重置为未挂载
+    }
+
+    render() {
+      // 只有在首次进入页面需要将window.__INITIAL_DATA__作为props，路由切换时不需要
+
+      const props = {
+        initialData: {},
+        ...this.props
+      }
+      // @ts-ignore
+
+      if (__SERVER__) {
+        //服务端渲染
+        props.initialData = this.props.staticContext.initialData || {}
+      } else {
+        //客户端渲染
+        if (this.state.canClientFetch) {
+          //需要异步请求数据
+          props.initialData = this.state.initialData || {}
+        } else {
+          // @ts-ignore
+          props.initialData = window.__INITIAL_DATA__
+          // @ts-ignore
+          window.__INITIAL_DATA__ = null //使用过后清除数据,否则其他页面会使用
+        }
+      }
+
+      return <SourceComponent {...props}></SourceComponent>
+    }
+  }
+}

src/client/components/loading/index.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function LoadingComponent(props: any) {
+  return <div>loading......</div>
+}

src/client/library/isConnect.ts

@@ -0,0 +1,10 @@
+import Container from '@/components/container'
+import { connect } from 'react-redux'
+// @ts-ignore
+import withStyles from 'isomorphic-style-loader/withStyles'
+
+export default ({ css, mapStateToProps, mapDispatchToProps }:any, ActiveComponet:any) => {
+  return withStyles(css)(
+    connect(mapStateToProps, mapDispatchToProps)(Container(ActiveComponet))
+  )
+}