使用express， create-react-app， mongodb搭建react模擬數據開發環境
提要
最近剛剛完成了一個vue的項目，其中涉及的用戶數有6000多個以及其他數據也比較多，為了在前端能夠真實的進行數據模擬，所有把全量數據拷貝下來放到了api.json中。這樣導致整個api.json文件過大，每次進行修改的時候編輯器都會卡頓。
項目做完後就在想能不能把大量的模擬數據放在數據庫中進行管理，用nodejs來操作數據庫。順便再熟練一下nodejs。
使用的技術棧
express
是nodejs當前最流行的後臺框架。官網對express的描述，它是一個機遇Node.js平臺，快 速、開放、極簡的web開發框架。優點是易上手、高性能、擴展性強：
- 易上手：nodejs最初是為了開發高興能web服務器而被設計出來的，然而相對底層的API會讓不少新手望而卻步。express對web開發相關的模塊進行了適度的封裝，屏蔽了大量復雜繁瑣的技術細節，讓開發這個只需要專註於業務邏輯的開發，極大的降低了入門和學習的成本。
- 高性能：express僅在web應用相關的nodejs模塊上進行了適度的封裝和擴展，較大程度避免了過度封裝導致的性能損耗。
- 擴展性強：基於中間件的開發模式，使得express應用的擴展、模塊拆分非常簡單，既靈活，擴展性又強。
create-react-app
react+redux和vue+vuex是現在最流行的兩個構建webapp的前端構建框架，其中react背靠Facebook這個大樹，在技術上最早實現了虛擬DOM和高效的Diff算法，使得其擁有較高的性能。同時，代碼邏輯也非常簡單。
create-react-app是Facebook官方提供的一套不需要配置的React開發方案，也是當前最流行的react應用構建方法。這個腳手架已經做好了基礎webpack配置，帶有自動更新，錯誤提示等功能，僅僅需要創建，啟動就可以快速進行開發。
使用前我們需要在全局安裝：
npm install creat-react-app -g
mongodb
MongoDB和Node.js特別般配，因為Mongodb是基於文檔的非關系型數據庫，文檔是按BSON（JSON的輕量化二進制格式）存儲的，增刪改查等管理數據庫的命令和JavaScript語法很像，比較適合前端同學使用。
yarn
由於是從頭開始搭建一個開發環境，所有就考慮嘗鮮使用Facebook今年推出的yarn。
Yarn和npm一樣，是一款Nodejs包管理工具。
Yarn會緩存它下載的每個包，所有不需要重復下載。它還能並行化操作以最大化資源利用率，所以安裝速度之快前所未有。
Yarn在每個安裝包的代碼執行前使用校驗碼驗證包的完整性。
Yarn使用一個格式詳盡簡潔的lockfile和一個精確的算法來安裝，能夠確保能夠在一個系統上的運行和安裝過程也會以同樣的方式運行在其他系統上。
開始創建
假設我們需要創建一個test-app項目：
- 創建項目目錄
create-react-app test-app
稍等片刻，yarn會為我們創建一個目錄，拉去需要的依賴，webpack的配置通過yarn來調用，可以看到目錄結構:
安裝完成後控制臺會有清晰的提示信息：
- 開始開發
cd test-app && yarn start
這是會啟動默認端口為3000的頁面，如果端口沖突，會提示你是否選用另一個端口
進入src目錄進行開發即可
- 開發完成需要發布時
運行 yarn build 進行編譯，發布build目錄
創建完成會自動生成build文件夾，將js，css文件放在static目錄中
基本的創建和發布react應用過程完成，中間省略了大量的配置問題，給需要快速構建項目帶來了極大的便利。當然，默認配置也許不能夠滿足所有需求，create-react-app也提供了拋出所有配置項的yarn eject供給開發者使用，如果需要調整webpack的內容，就需要使用到這個命令。不過這樣也會導致不能回滾。官方的更新比較快，如果不是需要的情況建議直接使用內置的行為。
配合express構建服務端應用
由於在項目開發過程中需要express構建server端應用，開發模式需要做一些小調整。
- 創建一個叫server的文件夾和初始化package.json文件
mkdir server && cd server && yarn init
- 增加依賴包
yarn add express body-parser nodemon babel-cli babel-preset-es2015
主要用到express, body-parser, nodemon（監測node.js改動兵自動重啟， 適用於開發階段），babel-cli和babel-preset-es2015（以便使用es6開發）
執行express
express
就會在server文件夾中生成express構建nodejs服務器模塊。
- 修改package.json
這裏我在操作的時候nodemon模塊並沒有下載成功，需要單獨執行：
yarn add nodemon
下載下來nodemon 模塊。
express默認生成的scripts是：
"scripts": { "start": "node ./bin/www" }
將其改為：
"scripts": { "start": "nodemon --exec node ./bin/www" }
- create-react-app 會啟動一個靜態資源服務器，那麽同時需要進行server端的時候需要怎麽做呢？
我們會鬼頭來修改test-app目錄下的package.json。
create-react-app會默認天機好4段scripts：
"scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" }
我們需要對start 和 build做調整，以便可以同時啟動前端開發頁面以及後端服務。在這裏引入concurrently這個包來執行兩條命令：
yarn add concurrently
package.json:
"scripts": { "react-start": "node scripts/start.js", "start": "concurrently \"yarn react-start\" \"cd server && yarn start\"", "react-build": "node scripts/build.js", "build": "concurrently \"yarn react-build\" \"cd server && yarn build\"", "test": "node scripts/test.js --env=jsdom" }
這樣，我們只要執行yarn start 會同步啟動 webpack 以及 server文件下的nodemon.
參考網址：
https://segmentfault.com/a/1190000009857965
http://www.cnblogs.com/xiaohuochai/p/7189074.html
使用express， create-react-app， mongodb搭建react模擬數據開發環境