如題；本文所講架構主要用到技術棧有：Node, Express, React, Mobx, webpack4, ES6, ES7, axios, ejs, log4js, scss，echarts，ant desige
使用Express初始化Node服務
開始本項目首先你的電腦要安裝有node，npm這個沒什么好說的。其次本次Node服務用的框架是express；所以要安裝：express-generator
然后使用express your-project初始化你的express項目
npm install express-generator -g //執行這條命令全局安裝express-generator，如果你不想全局安裝把-g去掉即可
初始化express項目之后我們開始把react，webpack整合到這個node服務上。
初始化React項目並整合webpack
這里整合webpack使用的是webpack4的版本，如果你熟悉vue-cli(vue-cli3之前的版本)的話你應該會知道webpack配置有多少個文件，這里參考了vue-cli生成的webpack配置。
添加src文件夾
src文件夾下的內容都是整個react的一些核心配置，如請求處理，css樣式，公共組件，路由，頁面，stores全局狀態數據。
配置.babelrc
因為用到ES6，ES7語法所以要配置.babelrc文件。這個文件東西不多下面直接貼出代碼
1 { 2 "presets": [["es2015", { "modules": false }], "react", "stage-0"], 3 "plugins": [ 4 "transform-decorators-legacy", 5 ["import", { "libraryName": "antd", "style": "css" }], 6 "transform-runtime" 7 ] 8 }
修改Node服務app.js
其實主要是加上這句：app.use('/', reactSSR); 其就是為了項目啟動的時候開啟熱更新並渲染views中reactSSR.ejs這個模板引擎文件從而達到服務端渲染的目的。
項目結構
這里把項目主要的文件夾結構放到最后。
項目GitHub地址：https://github.com/Uwah/node-react
后期部署上服務器之后會找個時間更新博客，主要是用到pm2