文档章节

dva-quickstart 与 create-react-app 比较(一)

o
 osc_x4h57ch8
发布于 2018/04/24 11:49
字数 667
阅读 0
收藏 0

精选30+云产品,助力企业轻松上云!>>>

最近在学习 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.后台消息传递





 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

我们一定会在人生的更高处相见的

2020.6.7 我知道没人会看到 2021.6.7 我再来写下 每天进步一点点 一年后我就是不一样的我 你也是。 高考加油!

osc_9oidllr2
9分钟前
0
0
esp8266物联网开发一:MicroPython初战江湖

用esp8266做的物联网开发,涉及到固件烧写,固件擦除,代码编写等方面,做一一记录。 1. 固件烧写 首先,下载固件烧写工具:https://www.espressif.com/sites/default/files/tools/flash_dow...

osc_s2b5kacl
10分钟前
8
0
获小黄衫有感

这个作业属于哪个课程 https://edu.cnblogs.com/campus/fzu/2020SpringW/ 一、与软工的开始 在选课的时候咨询学长意见,听上届学长说这门课会有寒假作业,心里很忐忑,又抱有侥幸心理——可能...

osc_r5t7sskd
12分钟前
0
0
ppt 视频不显示控制条

1 正常解决方法 2 如果还不能显示可能是ppt是兼容模式,另存为非兼容模式就好了 后缀是.ppt 现存就好了

osc_hzf6peqc
13分钟前
3
0
五笔经常打不出来的字:温故而知新

遍 ynmp 凸凹 hgmm 凸 hgm 凹mmgd

osc_iy56i6w3
14分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部