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

巴特西

dva-quickstart 与 create-react-app 比较（一）

附：

最新文章

热门文章