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.后台消息传递