前一段時間做了一個小專案，時間比較緊，就一個人月。最終希望能夠通過微信公眾號連結啟動應用。
專案的業務細節就不多說了，主要是想分享一下做這個專案技術方面的一些經驗。
技術選型
參考範圍大致三種：AngularJS，Angular，React。
這裡可能會有些困惑，AngularJS和Angular不是一個東西嗎？
沒錯，它們是一個東西，但也不是一個東西。好了，廢話少說，首先說明一下AngularJS和Angular的區別。
引用官方文件中的一句話
Angular is the name for the Angular of today and tomorrow. AngularJS is the name for all v1.x versions of Angular.
即
Angular：指的是 v2.x 及以後的版本
AngularJS：特指 v1.x
由於Angular從2.0以後版本更新比較大，所以為了做區分，只能想出這麼一招了。
好了，迴歸正題，這三種技術怎麼選擇？
以下是我當時的考慮：
AngularJS：由於之前兩個專案一直在用AngularJS，所以使用起來並不陌生，相對buffer也會少很多(前面說了，時間比較緊，只有一個月)。碰到問題還可以和大家商量一下。
但是AngularJS效能及體積是個問題，尤其是要在手機端執行。
Angular: 效能不是問題，體積也還好。但是接觸比較少，之前只做過一個Web端的專案。
React: 前一段時間剛剛研究過，效能，體積都不是問題。但是同Angular一樣，沒有實際專案經驗啊，出了問題就只能百度了。
經過以上的一番權衡，其實我心裡是想用React的。其中一個原因是經過前一段時間的學習，很想通過一個專案積累一些React的開發經驗，
另外一個原因是React無論從效能上（得益於Virtual DOM）還是思想上（元件化）都更為先進。
基於以上兩點原因，所以在和專案經理確定技術選型的時候，我極力推薦React，雖然可能會存在一些buffer，但是從可持續化發展的角度考慮（自己瞎猜的…），最終專案經理同意了。
專案框架搭建
在GitHub上看了很多的boilerplate工程，或多或少都和自己的需求有些出入。
所以，最終自己通過React官方的create-react-app cli搭建了一個seed工程。
1. 準備環境
2. 安裝creat-react-app cli
npm install -g create-react-app
複製程式碼3. 建立工程
create-react-app react-seed
複製程式碼然後進入專案根目錄react-seed安裝相關依賴
cd react-seed
npm install
複製程式碼4. 暴露配置項
由於採用create-react-app建立的專案webpack等配置資訊都是封裝好的，所以為了靈活修改相關配置，可以通過以下命令讓封裝好的配置檔案暴露出來。
npm run eject
複製程式碼建立好的專案目錄如下：
5. 本地服務啟動
// 啟動本地server用於開發
npm run start
複製程式碼將會在本地 3000 埠啟動
redux整合
熟悉React的可能都知道，React是單向資料流，所以有些情況下單單依賴React自身無法實現元件之間的通訊，這時就需要Redux登場了。
本文不介紹Redux的語法及思想，只說明如何整合。
首先需要安裝Redux相關依賴，由於不同版本之間可能存在相容性問題，所以安裝的時候最好制定版本：
npm install redux@3.7.2 --save
npm install redux-thunk@2.1.0 --save
npm install react-redux@5.0.6 --save
複製程式碼然後就可以在專案中引入redux了，可以像如下方式組織目錄結構：
路由整合
npm install react-router@3.0.5 --save
複製程式碼路由支援巢狀，程式碼如下：
const routes = (
<Router history={hashHistory}>
<Route path="/home" component={Layout} onEnter={onEnter}>
<IndexRoute getComponent={home} onEnter={onEnter}/>
<Route path="/home" getComponent={home} onEnter={onEnter}/>
<Route path="/detect" getComponent={detect} onEnter={onEnter}/>
<Route path="/about" getComponent={about} onEnter={onEnter}/>
</Route>
<Route path="/unauthorized" getComponent={unauthorized}/>
<Redirect from="*" to="/home" />
</Router>
);
export default routes;
複製程式碼國際化方案
採用的是常用的react-intl
npm install react-intl@2.4.0 --save
複製程式碼UI元件整合
基於React的UI元件在這裡推薦兩個，一個是螞蟻金服的Ant Design；另外一個是Material-UI。
兩個都很不錯，本人使用的是Ant Design。
npm install antd@2.13.10 --save
複製程式碼fetch整合
關於請求資料有很多種方式，本人用的是fetch。
npm install fetch@1.1.0 --save
複製程式碼可以簡單封裝一下，如下：
import `whatwg-fetch`
import loggerService from `./logger`
let notAuthorizedCounter = 0;
let fetchService = {
fetch: (url, method, header, body) => {
if (!header) {
header = {}
}
return fetchService[method.toLowerCase()](url, header, body).catch(function(exception) {
loggerService.log(`fetchService failed:`, exception);
// token過期，重新獲取token併發起請求
if (exception.code === `401` || exception.code === `403`) {
notAuthorizedCounter++;
// 最多重試3次
if (notAuthorizedCounter > 2) {
notAuthorizedCounter = 0;
loggerService.warn("401 or 403 received. Max attemps reached.");
return;
} else {
return fetchService.fetch(url, method, header, body);
}
}
});
},
get: (url, header) => {
return fetch(url, {
method: `GET`,
headers: header
}).then((response) => {
return response.json();
});
},
post: (url, header, body) => {
header[`Content-Type`] = `application/json`;
return fetch(url, {
method: `POST`,
headers: header,
body: JSON.stringify(body)
}).then((response) => {
return response.json();
});
}
};
export default fetchService;
複製程式碼專案部署
首先對專案進行打包。
npm run build
複製程式碼可以通過以下命令在本地環境執行打包後的專案。
serve -s build
複製程式碼如果專案中引入路由的時候使用的是BrowserRouter,
那麼當執行npm run build打包之後，本地開啟index.html檔案，會出現空白頁面。
原因是BrowserRouter是用瀏覽器history物件的方法去請求伺服器，
如果伺服器沒有配置相對應的路由去指向對應的頁面，路由會找不到資源。
BrowserRouter會變成類似這樣的路徑 http://111.230.139.105:3001/detail/9459469，這樣的路徑在訪問伺服器時，伺服器會認為是請求查詢某個介面資料。
所以這時候必須使用HashRouter，這時候訪問具體頁面時就是http://111.230.139.105:3001/#/detail/9459469