項目開始前，我們先聊一聊關于項目的一些說明。該項目起始于2017年初，當時公司主要技術棧為gulp+angular，鑒于react的火熱的生態，在公司決定研發bss管理系統時選用react開發，目的也是為react native打下基礎，以解決后期公司大前端技術棧的逐步成熟。（當時沒有選擇vue開發的主要原因是weex生態還不夠特別成熟），既然決定換新，項目的構建也跟著一起換，從gulp轉向火熱的webpack，持續大半年的更新迭代，我們將構建模塊逐步從項目中抽離出來，把構建模塊作為npm包多帶帶管理，完成和項目代碼解耦，于是就有了后面我們要說的wci-build構建模塊包和wci-cli項目腳手架。

項目采用前后端分離的形式，后端選用Maven+SpringClould全家桶開發，前端選用webpack+react全家桶開發，前后端全部采用包管理工具完全解決項目依賴管理的難題，版本管理采用git，前后端通過json交互，swgger管理接口文檔，接口全部遵循restful規范。由于本文面向社區開放，故本文中不涉及公司業務層的代碼，本文全部代碼均為最新編寫，我們以一個旅游管理系統的三個模塊為大家演示項目（登陸登出、用戶模塊、景點模塊）。為了快速開展，本文涉及的后端代碼直接采用Java的SSM框架搭建，源碼也將為大家奉上。朋友們也可以使用mock模擬接口數據。后期我們在演示nodejs+espress時將接口代碼全部轉為node形式。

因本文不是講解基礎，故大家在敲代碼前，還需要具備一定的前端基礎，部分如下

html、css、javascript基礎知識

es6基礎知識

react基礎知識

了解什么是webpack、babel、redux、react-router、nodejs、npm

熟悉螞蟻金服ant design

熟悉less基本使用

本項目集成了最新的react16、react-router4、redux，同時可以選擇性集成antd|antd mobile，在解決繁瑣的架構配置工作外，還解決了以下問題

通用問題

支持開發效率更高的ES6編寫代碼。

拆分開發、測試、生產環境，完成從開發到上線的所有工作。

開發環境包含熱替換，本地IP、端口可配置，接口可配置，微服務模塊可配置

測試環境包含代碼壓縮、合并、css抽離、公共組件抽離、代碼添加hash、測試版本后綴

生產環境包含代碼壓縮、合并、css抽離、公共組件抽離、代碼添加hash、生產版本后綴（和測試代碼完全一樣，只缺少測試版本號）

支持自定義添加webpack loader

其他問題

目前大型項目后端多采用微服務架構，API接口在開發、測試、生產環境下來回切換，需要頻繁修改代碼。解決方案：通過配置文件的方式統一配置項目模塊接口

項目模塊在分拆開發的過程中css命名沖突，導致代碼維護性較差。解決方案：構建工具預加載css時自動化添加hash，使css代碼模塊化

不同開發人員，不同的代碼習慣造成項目代碼難以維護。解決方案：在代碼編寫、構建、版本管理三個方向加入代碼規范校驗（airbnb規范）

在同時開發多個系統的時候，構建業務模塊在不同的項目都存在，當需要修改配置或者優化構建方案的時候，需要修改多個項目的配置。解決方案：抽離構建模塊，采用npm形式依賴。

雖然經過大半年迭代，但我們還需要在實際項目開發中支持更多的個性化需求

cdn自動化

更加完善的持續集成

單元測試，包括代碼，交互測試

mock數據，實現前后端真正0接觸

...

大家在開發過程中遇到任何問題，希望可以給我們留言，我們會不斷優化項目。未來，我們還會加入mobx、rxjs、immutablejs、GraphQL等，也希望在和大家的探討中，持續進步。

本項目基礎環境必須依賴nodejs和npm,未安裝的朋友可以去官網自行安裝，安裝教程這里不詳細說明，安裝完成后使用如下命令，查看是否安裝成功。

node -v
npm -v

本項目我們使用wci-cli腳手架初始化項目

全局安裝wci-cli

npm install -g wci-cli

創建項目

wci-cli 腳手架可以創建三種項目，分別是1.純凈的react項目 2.包含antd的react項目 3.包含antd-mobile的react項目，命令如下

wci new myapp

執行命令后，命令行會提示是否需要安裝antd以及選擇antd類型，即可完成項目初始化，如下

項目目錄

myapp
├── app // 項目業務代碼
│   ├── assets // 靜態文件目錄（圖片、字體等）
│   ├── script // js代碼目錄
│   │   ├── actions // redux action目錄
│   │   ├── componets // react 無狀態組件目錄
│   │   ├── containers // react 業務代碼
│   │   ├── reducers // redux reducer目錄
│   │   ├── util // 工具包目錄
│   │   │   ├── theme.js // antd自定義樣式文件
│   │   ├── Home.js // 首頁
│   │   ├── home.less // 首頁樣式
│   ├── styles // 全局樣式目錄
│   ├── index.js // 項目入口文件
│   ├── index.tpl.html // 項目html模版
├── node_modules // 依賴包目錄
├── .babelrc // babel配置文件
├── .eslintrc // eslint代碼校驗配置文件
├── .gitignore
├── package.json
├── README.md
├── wci.json // wci項目配置文件（主要配置一些開發、測試、生產環境的信息）
└── webpack.js // webpack自定義配置文件

執行如下命令，運行開發環境

cd myapp
npm run start

如上圖，我們的項目已經跑起來了...

測試、發布

因我們需要保證測試代碼和生產代碼必須保持一致，所有在實際項目中，我們可以運行如下命令構建代碼

npm run test // 測試環境打包
npm run dist // 生產環境打包

測試代碼

生產代碼

到這里，我們已經完成項目前期開發的所有準備工作，接下來，我們一起開始擼代碼吧

項目結束后，我會為大家奉上兩篇彩蛋，分別是 1. 一步步搭建webpack前端構建工具并抽成npm多帶帶模塊 2. 一步步構建自己的npm開發包并且以一個真實例子演示（開發一個命令行生成文件夾結構的小工具）

正式開始擼代碼前，還要針對項目具體說明，包括項目代碼目錄介紹，前后端分離項目需要注意哪些問題，前后端如何鑒權等...

myapp
├── app // 項目業務代碼
│   ├── assets // 靜態文件目錄（圖片、字體等）
│   ├── script // js代碼目錄
│   │   ├── actions // redux action目錄
│   │   ├── componets // react 無狀態組件目錄
│   │   ├── containers // react 業務代碼
│   │   ├── reducers // redux reducer目錄
│   │   ├── util // 工具包目錄
│   │   │   ├── theme.js // antd自定義樣式文件
│   │   ├── Home.js // 首頁
│   │   ├── home.less // 首頁樣式
│   ├── styles // 全局樣式目錄
│   ├── index.js // 項目入口文件
│   ├── index.tpl.html // 項目html模版
├── node_modules // 依賴包目錄
├── .babelrc // babel配置文件
├── .eslintrc // eslint代碼校驗配置文件
├── .gitignore
├── package.json
├── README.md
├── wci.json // wci項目配置文件（主要配置一些開發、測試、生產環境的信息）
└── webpack.js // webpack自定義配置文件

以上是代碼的全部目錄，下面我們根據功能依次介紹：

node_modules、.gitignore、package.json、README.md

node_modules: npm依賴包目錄，開發者可以不用管，只要知道我們項目里所有的依賴都下載在這個文件夾下
.gitignore：git需要忽略的文件
package.json：npm最主要的文件，里面寫滿了我們依賴包的結構和一些項目信息
README.md：github的說明文件

.babelrc、.eslintrc

.babelrc：babel配置文件，可以配置部分自定義babel插件（例如本項目里antd自定義主題和javascript@語法糖就在這里配置）
.eslintrc：eslint配置文件，可以自定義配置eslint規則，詳細規則可以去官網eslint查看

說明：這兩個模塊本該配置在wci-build構建工具里，但考慮到項目的靈活性，所有抽離出來放在項目根目錄

webpack.js

webpack.js：webpack loader個性化的配置文件，可以自定義添加webpack loader

wci.json

wci.json：項目的配置文件，可以自定義配置項目

{
  "index": "app/index.js", // 項目入口文件
  "hostname": "127.0.0.1", // 開發環境IP地址（可以配置域名通過本地host轉發）
  "name": "wci-antd-app", // 項目名稱（顯示在瀏覽器title里的名字）
  "libs": [ // 項目的公共包，后續可以自行添加
    "react",
    "react-dom",
    "axios",
    "classnames",
    "prop-types",
    "react-redux",
    "react-router-dom",
    "redux",
    "redux-thunk"
  ],
  "dev": { // 開發環境配置
    "port": 8031, // 開發環境端口
    "src": "app", // 開發環境監聽目錄
    "api": "", // 開發環境后端接口地址
    "module": {}, // 開發環境的模塊包
    "is_eslint": false // 開發環境是否開啟eslint校驗
  },
  "test": { // 測試環境配置
    "module": {}, // 測試環境的模塊包
    "api": "" // 測試環境后端接口地址
  },
  "prod": { // 生產環境配置
    "module": {}, // 生產環境的模塊包
    "api": "" // 生產環境后端接口地址
  }
}

app

項目目錄

├── app // 項目業務代碼
│   ├── assets // 靜態文件目錄（圖片、字體等）
│   ├── script // js代碼目錄
│   │   ├── actions // redux action目錄
│   │   ├── componets // react 無狀態組件目錄
│   │   ├── containers // react 業務代碼
│   │   ├── reducers // redux reducer目錄
│   │   ├── util // 工具包目錄
│   │   │   ├── theme.js // antd自定義樣式文件
│   │   ├── Home.js // 首頁
│   │   ├── home.less // 首頁樣式
│   ├── styles // 全局樣式目錄
│   ├── index.js // 項目入口文件
│   ├── index.tpl.html // 項目html模版

如上，因為react遵循組件化開發，故我們的業務代碼全部寫在containers目錄下，并且模塊的樣式文件、高階組件寫在相對的模塊下，如圖

styles目錄用于存放項目全局的樣式文件，例如全局樣式的變量文件等...

版本管理：

推薦使用gitflow來進行版本的管理，這里不做詳細描述

前后端分離跨域：

一旦項目采用前后端分離，跨域是所有項目里不可避免的問題，目前跨域的解決方案主要有三種

采用jsonp方式（只支持GET請求）

采用cors方式

采用node中間件方式（需要多帶帶部署nodejs服務）

我們這里采用方式2

java代碼

response.addHeader("Access-Control-Allow-Origin", "*");
response.addHeader("Access-Control-Allow-Credentials", "true");
response.addHeader("Access-Control-Allow-Headers","Content-Type,Content-Token,Content-User,X-Requested-With");

nodejs 代碼

res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers","Content-Type,Content-Token,Content-User,X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By"," 3.2.1")
res.header("Content-Type", "application/json;charset=utf-8");

這種方式還可以自定義請求頭的認證信息

不明白的朋友可以去看阮一峰大神的這篇文章

未完待續 更新于2018-02-26