一套基於react-mobx腳手架--架構策略與思路

初衷

剛入職一家公司，接手了前端工做。以前的架構採用gulp(task)-runWebpack的架構。本地起Caddy服務器。因爲gulp跑webpack在dev開發時，是編譯成靜態文件寫入硬盤。而且沒有采用HMR（這個顯然不是必要的）。起服務須要Caddy，並無使用node server等。因爲我確實不會使用Caddy等緣由。打算從新搭建一套腳手架，達到儘可能使用node解決。並提高性能開發。

腳手架地址

https://github.com/edwardxyt/...
求求大爺們給個star吧！！！！！！
本篇文章只是在開發腳手架時候的思路，具體的使用方法請看ReadMe

待解決問題

1. 環境有 development' 'production' 'test'。要根據環境判斷是否開啓debug，是否生成source-map,是否壓縮等，
2. 多項目，一套架構能夠多入口，分別編譯。由於公司有3條產品線。每一條裏面還有多專題。web和wap頁。因此一套腳手架要能支持多項目。
3. 配置文件，要統一。並支持本地覆蓋。
4. index.html要更強大。因此在這裏要使用handlebars。
5. 按需加載。SPA必作優化項。
6. ajax的封裝也很重要。
7. 編譯策略（打包策略）。
8. 工具函數庫。
9. UI庫。

解決辦法與思路（與上面列表對應）

1. 在開發模式下，只有development，不壓縮混淆代碼，開啓debug。開啓Vconsole。
   這裏使用dev-webpack-server。啓動熱替換和代理（代理用於本地使用faker與json-server）編譯模式下要考慮production或者test 二者都是正式代碼，區別在因而否開啓debug和console。
2. 考慮到多入口，個人解決方案是npm run dev --xxx 既傳參數，而且--xxx和src的目錄結構同樣。在啓動時候就能夠肯定要開發的某個項目的某個專題了。
3. 我喜歡統一配置文件，好處在於管理腳手架只修改這裏就能夠了。
   策略：屢次使用的字段提取到配置文件裏。若是隻使用一次，但有可能變更的字段提取到配置文件裏。其餘不變字段不提取，寫死於webpack.config裏。
4. 使用handlebars的好處在於初始化項目時，增長了擴展性，而不是在jsx寫入擴展，好比統計meta等。
5. react-router4 的按需加載不是很友善。這裏引用了sanyuelanv的案例以及按需加載。這樣在龐大的項目首次加載也不會不少。提高性能。很關鍵。
6. 這裏使用了axios建議使用req和res的攔截器，它有四次能夠覆蓋配置傳參數的生命週期。建議使用實例化。能夠統一錯誤處理。統一響應格式。
7. 開發模式development下、不壓縮、不混淆、開啓debug。
   編譯模式test下、開啓debug、壓縮代碼、開啓source-map。
   編譯模式production下、壓縮混淆。開啓兼容。提取合併css。提取合併JS。待發布正式服務器。
8. 工具款使用了lodash和ramda習慣用什麼你本身選擇
9. antd 和 antd-mobile兩個庫。會根據你啓動時候傳入的 --MOBILE=true來分別加載。

簡化易讀

有些人喜歡把 webpack 作成 base.config、而後合併對象。生成對應的 development' or 'production'。可是我並不喜歡這種方式 首先模式下 只有 3 種 development' or 'production' 'test'。而後解耦的也並非不少。且不易於讀。個人策略是 不提取 baseConfg，只作總體項目的配置文件。這樣易讀 易於修改。

最後請求

給個star、給個star、給個star、給個star、給個star、給個star、給個star、給個star、給個star、