最近在學習 React ， 現對 dva-quickstart 與 create-react-app 比較
1. 安裝， 兩個都需要安裝工具包：
npm install -g create-react-app
npm install dva-cli -g
2.初始化一個工程
dva new dva-quickstart
create-react-app my-app
生成完成后， 生成 dva-quickstart 和 my-app 目錄結構
運行 nmp start , 經測試 my-app 能直接啟動， dva-quickstart 還需要 npm i 安裝依賴包， 然后才能運行 npm start
3. 文件結構
cra( create-react-app )
.idea node_modules public src .gitignore reame.md yarn.lock
dnd( dva new dva-quickstart )
.editorconfig .eslintrc .gitignore .idea .roadhogrc.mock.js .webpackrc mock node_modules package-lock.json package.json public src
從外部文件看， 基本上是一樣多。
cra( create-react-app )
App.css
App.js
App.test.js
index.css
index.js
logo.svg
registerServiceWorker.js
App.js 文件是一個組件里面包含 div 返回， index.js 里關聯 <App /> 和 ‘root’, 還有一個函數 registerServiceWorker() 包含在 registerServiceWorker.js文件里
DQS ( dva new dva-quickstart )
assets
components
index.css
index.js
models
router.js
routes
services
utils
主要文件：
index.js : 啟動的 1，2，3，4，5
router.js : 配置路由， 即方位地址 url/#/xx_page 對應某個 .js ( 組件文件 )
主要目錄: components ， models, routes, ( services, utils 與后台交互相關）
package.json 比較：
{ "name": "my-app", "version": "0.1.0", "private": true, "dependencies": { "react": "^16.3.2", "react-dom": "^16.3.2", "react-scripts": "1.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } }
{ "private": true, "scripts": { "start": "roadhog server", "build": "roadhog build", "lint": "eslint --ext .js src test", "precommit": "npm run lint" }, "dependencies": { "acorn": "^5.5.3", "dir-glob": "^2.0.0", "dva": "^2.2.3", "normalize-path": "^3.0.0", "react": "^16.2.0", "react-dom": "^16.2.0" }, "devDependencies": { "babel-plugin-dva-hmr": "^0.3.2", "eslint": "^4.14.0", "eslint-config-umi": "^0.1.1", "eslint-plugin-flowtype": "^2.34.1", "eslint-plugin-import": "^2.6.0", "eslint-plugin-jsx-a11y": "^5.1.1", "eslint-plugin-react": "^7.1.0", "husky": "^0.12.0", "redbox-react": "^1.4.3", "roadhog": "^2.0.0" } }
比較可以看出：
1. CRA 只導入 react三個依賴 react-scripts（運行啟動用） ， DQS 分成運行依賴和開發依賴， 運行依賴包含： acorn（A tiny, fast JavaScript parser.） dir-glob dva
normalize-path react react-dom 開發依賴主要包含： eslint， babel， roadhog
2. 運行 ， CRA ： react-scripts start DQS： build 運行 roadhog build ， start 運行 roadhog server
3. 從配置里可以看出， DQS 里包含了 DVA， DVA 是對數據交互，數據流進行了規范。
附：
node的glob模塊允許你使用 *等符號, 來寫一個glob規則,像在shell里一樣,獲取匹配對應規則的文件.
這個glob工具基於javascript.它使用了 minimatch 庫來進行匹配
一、Service Worker是什么？
一個Service Worker是一段運行在瀏覽器后台進程里的腳本，他獨立於當前頁面，提供了那些不需要與web頁面交互的功能在網頁背后悄悄執行的能力。
在將來，基於它可以實現消息推送，靜靜更新以及地理圍欄等服務，但是目前它首先要具備的功能是攔截和處理網絡請求的功能，包括可編程的消息緩存管理能力。
二、Service Worker的作用
1.網絡代理，轉發請求，偽造響應
2.離線緩存
3.消息推送
4.后台消息傳遞