test

.gitignore

@@ -38,6 +38,7 @@ bower_components
 
 # Compiled binary addons (https://nodejs.org/api/addons.html)
 build/
+buildserver/
 src/.umi/
 # Dependency directories
 node_modules/

Routes.js

@@ -0,0 +1,11 @@
+import Detail from "./src/forge/Main/Detail";
+
+
+export default [
+  {
+    key:"detail",
+    path: "/:owner/:projectsId",
+    exact: true,
+    component: Detail,
+  },
+];

config/webpack.server.js

@@ -0,0 +1,28 @@
+const path = require("path");
+const nodeExternals = require("webpack-node-externals");
+
+const serverConfig = {
+  target:"node", //由于输出代码的运行环境是node，源码中依赖的node原生模块没必要打包进去；为了不把nodejs内置模块打包进输出文件中，例如： fs net模块等；
+  mode: "development",
+  entry: path.resolve(__dirname,"../server/index.js"),
+  output:{
+    filename:"bundle.js",
+    path: path.resolve(__dirname,"../buildserver")
+  },
+  externals:[nodeExternals()], //为了不把node_modules目录下的第三方模块打包进输出文件中,因为nodejs默认会去node_modules目录下去寻找和使用第三方模块。
+  module:{
+    rules:[
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: "babel-loader",
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
+    ]
+  }
+};
+
+module.exports = serverConfig;

package.json

@@ -27,6 +27,7 @@
     "echarts": "^4.9.0",
     "echarts-wordcloud": "^2.0.0",
     "editor.md": "^1.5.0",
+    "express": "^4.18.2",
     "flv.js": "^1.5.0",
     "fs-extra": "3.0.1",
     "i18next": "^23.4.5",
@@ -88,6 +89,7 @@
     "react-redux": "5.0.7",
     "react-resizable": "^1.10.1",
     "react-router": "^4.2.0",
+    "react-router-config": "^5.1.1",
     "react-router-dom": "^4.2.2",
     "react-slick": "^0.28.1",
     "react-split-pane": "^0.1.91",
@@ -104,6 +106,7 @@
     "slick-carousel": "^1.8.1",
     "store": "^2.0.12",
     "styled-components": "^4.4.1",
+    "webpack-node-externals": "^3.0.0",
     "weixin-js-sdk": "^1.6.0",
     "whatwg-fetch": "2.0.3",
     "wrap-md-editor": "^0.2.20",
@@ -120,7 +123,9 @@
     "gen_stats": "NODE_ENV=production webpack --profile --config=./config/webpack.config.prod.js --json > stats.json",
     "ana": "webpack-bundle-analyzer ./stats.json",
     "analyze": "npm run build -- --stats && webpack-bundle-analyzer build/bundle-stats.json",
-    "analyz": "NODE_ENV=production npm_config_report=true npm run build"
+    "analyz": "NODE_ENV=production npm_config_report=true npm run build",
+    "server": "cross-env NODE_ENV=production nodemon --exec node \"./buildserver/bundle.js\" --watch config --watch server",
+    "build:server": "webpack --config config/webpack.server.js"
   },
   "jest": {
     "collectCoverageFrom": [
@@ -191,6 +196,7 @@
     "babel-plugin-transform-decorators-legacy": "^1.3.5",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-polyfill": "^6.26.0",
+    "babel-preset-env": "^1.7.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-react-app": "^3.1.1",

server/index.js

@@ -0,0 +1,11 @@
+import express from "express";
+import {render} from "./render";
+
+const app = express();
+app.use(express.static('build'))
+
+app.get('*',function (req,res) {
+  render(req,res);
+})
+
+app.listen(3000);

server/render.js

@@ -0,0 +1,29 @@
+import React from "react";
+import {renderToString} from "react-dom/server";
+import {StaticRouter} from "react-router-dom";
+import {renderRoutes} from "react-router-config";
+import Routes from "../Routes";
+import { Provider } from "react-redux";
+import fs from 'fs'
+import path from 'path';
+
+export const render = (req,res)=>{
+  const context = {
+    css: []
+  };
+
+  const content = renderToString((
+    <Provider>
+      <StaticRouter location={req.path} context={context}>{renderRoutes(Routes)}</StaticRouter>
+    </Provider>
+  ));
+
+  let html=fs.readFileSync(path.join(path.resolve(__dirname,'../build'),'index.html'),'utf-8');
+
+  const prepHTML=(data,rootString)=>{
+    data=data.replace('<div id="root" class="page -layout-v -fit widthunit"></div>',`<div id="root" class="page -layout-v -fit widthunit">${rootString}</div>`);
+    return data;
+  }
+
+  res.send(prepHTML(html, content))
+}