使用Dva手脚架搭建React项目

笔记

最近开发了一个新项目，这次并没有自己去构建目录和文件，而是使用了react的一个手脚架dva-cli工具部署的文件及目录，不得不说，使用这个工具开发起来还是很方便的。对于这次的开发，我做一下总结，来谈谈这次开发过程中遇到的坑和如何解决这些坑。

在开发新项目之前，本人就对Ant Design这个项目很关注了，它拥有丰富、灵活、实用的基础组件，为业务产品提供强有力的设计支持。不得不说的是，它的组件库相当丰富，基本上满足了需求。

在了解了这些之后，我们就要基于Ant Design来开发我们的项目了，关于react项目的构建脚手架实在太多，我这里不多说，我直接选用了dva-cli，选择它的理由就是它使用起来简单方便，不用自己另外再去配置webpack，只需将现有的配置文件稍作修改就可以了。

既然使用了dva-cli这种脚手架，那么dva的知识点就必需掌握了，因为开发过程中肯定会用到。不多说，大家自行搜索资料吧。

接下来直接点，构建项目：

1
2
3
4
5
6
7
8
9
# Install
$ npm install dva-cli -g
# Create app
$ dva new myapp
# Start app
$ cd myapp
$ npm start

全局安装dva-cli是很有必要的，不然后面的命令运行不起来。另外，dva-cli使用roadhog 来启动本地服务和打包项目的，详细文档可以查看 roadhog文档。

下面是使用dva命令生成的目录树

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
├── mock
    └── mockData.js        #
├── src                    # Source directory
    ├── assets             # Store images, icons, ...
    ├── components         # UI components
    ├── index.css          # CSS for entry file
    ├── index.html         # HTML for entry file
    ├── index.js           # Enry file
    ├── models             # Dva models
    ├── router.js          # Router configuration
    ├── routes             # Route components
    ├── services           # Used for communicate with server
    └── utils              # Utils
        └── request.js     # A util wrapped dva/fetch
├── .editorconfig          #
├── .eslintrc              # Eslint config
├── .gitignore             #
├── .roadhogrc             # Roadhog config
└── package.json           #

dva的api全在这里的了

以上只是简单的生成了一个项目目录，具体怎么脱离后端提供的接口来进行开发。在我的项目中，我使用了Mock功能，并且roadhog也支持mock功能。使用mock,对于前端来说并不用等待后端给我提供接口，而是先与后端开发人员接口地址以及返回的数据结构和对应字段后，就可以使用Mock直接造数据和接口了。

前端开发的整个过程都是在Mock环境下进行的，并不需要后端提供真实接口。😏这样就大大提高了前端的开发效率（节省了等待接口的过程，不过后期还是要配合后端的真实接口联调的）。

下面给一个介绍一下Mock的配置文件.roadhogrc.mock.js是怎么设置的（生成随机数据，拦截 Ajax 请求）:

1
2
3
4
import mockData from './mock/mockData';  // 引入mock的数据
export default {
	'GET /api/path/**': mockData
}

上面就是简单的一个例子，从对应的mock文件中引入对应的数据，然后模拟接口。

接下来配置.roadhogrc.js文件，这是roadhog的配置文件，主要是配置代理，本地可直接调用后端真实接口获得数据：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
const onlineTarget = 'http://online.com';  // 线上项目地址域名
const offlineTarget = 'http://dev.com';  // 测试环境项目地址域名
const ProxyConfig = {
	// 是否开启代理访问真实接口
    proxy: true,  
    // 是否访问线上接口，如果代理关闭，这项无效，若代理开启，此项为true则访问线上，反之访问测试环境
    online: false  
};
export default {
    "entry": "src/index.js",
    "extraBabelPlugins": [
        "transform-runtime",
        ["import", { "libraryName": "antd", "style": true }],
        "add-module-exports"
    ],
    "env": {
        "development": {
            "extraBabelPlugins": [
                "dva-hmr",
                "babel-plugin-dva-hmr"
            ],
            "proxy": ProxyConfig.proxy
                    ? {
                        "/api/*": {
                            "target": ProxyConfig.online ? onlineTarget : offlineTarget,
                            "changeOrigin": true,
                            "secure":false,
                            "ws": true,
                            "headers": {
                                "origin": ProxyConfig.online ? onlineTarget : offlineTarget,
                                "Referer": ProxyConfig.online ? onlineTarget : offlineTarget
                            }
                        },
                        "/exhibitionservice/*": {
                          "target": "http://localhost:8060/",
                          "changeOrigin": true,
                          "secure":false,
                          "ws": true,
                          "headers": {
                            "origin": ProxyConfig.online ? onlineTarget : offlineTarget,
                            "Referer": ProxyConfig.online ? onlineTarget : offlineTarget
                          }
                        }
                    }
                    : {},
        },
        "production": {}
    },
    "theme": "./theme.config.js"
}

在完成了以上配置后，前端才能开始项目的开发了，这些都是在开发前的准备。

总结：

前端开始开发前的工作一定要做好，不然后期开发过程中可能会存在各种问题。我在这次的新项目开发中也踩到了不少坑，在后期的分享中再说一说哪坑，我是怎么解决这些坑的。组件化开发很好，不过也会带来很多问题，后面再细说。