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 库来进行匹配
一、Service Worker是什么？
一个Service Worker是一段运行在浏览器后台进程里的脚本，他独立于当前页面，提供了那些不需要与web页面交互的功能在网页背后悄悄执行的能力。
在将来，基于它可以实现消息推送，静静更新以及地理围栏等服务，但是目前它首先要具备的功能是拦截和处理网络请求的功能，包括可编程的消息缓存管理能力。
二、Service Worker的作用
1.网络代理，转发请求，伪造响应
2.离线缓存
3.消息推送
4.后台消息传递