Dva手腳架搭建React專案

最近開發了一個新專案，這次並沒有自己去構建目錄和檔案，而是使用了react的一個手腳架dva-cli工具部署的檔案及目錄，不得不說，使用這個工具開發起來還是很方便的。對於這次的開發，我做一下總結，來談談這次開發過程中遇到的坑和如何解決這些坑。

在開發新專案之前，本人就對Ant Design這個專案很關注了，它擁有豐富、靈活、實用的基礎元件，為業務產品提供強有力的設計支援。不得不說的是，它的元件庫相當豐富，基本上滿足了需求。

在瞭解了這些之後，我們就要基於Ant Design來開發我們的專案了，關於react專案的構建腳手架實在太多，我這裡不多說，我直接選用了dva-cli，選擇它的理由就是它使用起來簡單方便，不用自己另外再去配置webpack，只需將現有的配置檔案稍作修改就可以了。

既然使用了dva-cli這種腳手架，那麼dva的知識點就必需掌握了，因為開發過程中肯定會用到。不多說，大家自行搜尋資料吧。

接下來直接點，構建專案：

[Shell] 純文字檢視 複製程式碼
# Install
$ npm install dva-cli -g
# Create app
$ dva new myapp
# Start app
$ cd myapp
$ npm start

全域性安裝dva-cli是很有必要的，不然後面的命令執行不起來。另外，dva-cli使用roadhog 來啟動本地服務和打包專案的，詳細文件可以檢視 roadhog文件。

下面是使用dva命令生成的目錄樹

[HTML] 純文字檢視 複製程式碼
├── 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 請求）: 

[JavaScript] 純文字檢視 複製程式碼
import mockData from './mock/mockData';  // 引入mock的資料
export default {
	'GET /api/path/**': mockData
}

上面就是簡單的一個例子，從對應的mock檔案中引入對應的資料，然後模擬介面。

接下來配置.roadhogrc.js檔案，這是roadhog的配置檔案，主要是配置代理，本地可直接呼叫後端真實介面獲得資料：

[JavaScript] 純文字檢視 複製程式碼
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"
}

在完成了以上配置後，前端才能開始專案的開發了，這些都是在開發前的準備。