dva-quickstart 與 create-react-app 比較（一）

最近在學習 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 庫來進行匹配

1、Service Worker是什麼？

     一個Service Worker是一段運行在瀏覽器後臺進程裏的腳本，他獨立於當前頁面，提供了那些不須要與web頁面交互的功能在網頁背後悄悄執行的能力。
在未來，基於它能夠實現消息推送，靜靜更新以及地理圍欄等服務，可是目前它首先要具有的功能是攔截和處理網絡請求的功能，包括可編程的消息緩存管理能力。

2、Service Worker的做用 

   1.網絡代理，轉發請求，僞造響應 

    2.離線緩存

    3.消息推送

    4.後臺消息傳遞