react_home一個react全家桶項目，一個長期維護的react腳手架項目

react_home 地址

這是一個react的腳手架項目，其中包含着當前最新得腳手架配置方式，技術技術棧包括react16+mbox+antd+react-router4++webpack4+sass/less+axios+proxy，我會長期，並按期維護這個腳手架，將當下react生態圈最新技術運用進去,適用於新手或者關注進階的朋友學習參考。（廣大擼友以爲能用上的，也不要吝嗇本身的star哦）

腳手架工具

地址： github.com/aiyuekuang/…（具體用法可直接看該工具的README.md）

本項目的宗旨

更快、更新、更好用、更簡單

更新日誌

2019.05.17 日誌地址
1.拆分結構，將項目拆分爲業務代碼區（src/work裏），和環境區 2.在啓動命令中加入dev（開發環境），development（測試環境），production（生產環境） 3.使用mobx代替redux，更簡單，更高效，更清晰 4.優化webpack配置，編譯速度更快，體積更小 5.封裝react-router而且加入鑑權功能，動態輸出路由 6.新增了eslint代碼規範 7.wepack.config支持es6寫法

功能與特點

1. 項目集成了當前react中最好得ui輪子antd，不解釋，已配置好，直接使用
2. 項目具有了本地開發和打包上線得3個不一樣狀態得場景，在開發狀態，本地服務已配置了http-proxy，方便用戶跨域調用後端開發得接口，而且本地調試階段用得是根目錄下得index.html，打包上線得時候部署到服務器得是加過hash得index.html這樣就避免了測試人員老是沒法刷新出新得界面得問題
3. 項目集成了sass和less這2種樣式開發，方便2個陣營得都能愉快使用
4. 項目將原來的redux切換爲mobx，由於長時間使用redux我發現，實際開發中，徹底不必使用redux，每一個頁面的數據和頁面邏輯在當前頁面內完成是最佳的實踐，這樣更直觀，而且讓後來的改代碼的小夥伴很容易理解，也很容易排錯，試想一個數據在各個地方使用，出現問題，是否是很頭疼？因此我這樣作，而且在實際的應用中，確實是有這樣的效果
5. 本項目使用得axios來做爲ajax，有簡單得庫在utils中的fetchData
6. 本項目引入了esn得庫，一個很小巧得數據操做庫，在開發過程當中，裏面得不少功能都能用到，2個字方便
7. 本項目沒有嘗試服務器端渲染，筆者認爲，spa最大得特點就是使得先後端得開發模式發生了變化，讓整個開發流程變得舒服，前端人員開發出來得代碼能夠隨意得部署在任何地方，而不須要考慮服務器上得問題，而首屏加載過慢得問題能夠經過gzip來解決，我想這能知足大多數人得需求，固然了，項目有特殊性，仍是有不少項目須要用到服務端渲染，這能夠增強研究
8. 本項目有簡單的腳手架工具ztao-cli，能夠直接只用，更加方便快捷

項目結構

1.config：用於配置各類變量，有webpack中用到的，也有項目中用到的，好比"img_add_url"這個字段就是圖片上傳的前綴，用於圖片上傳後，後臺沒有返回完整的圖片url，只返回圖片的名稱後綴時，在前面加上地址的做用 2.dll：在package的script裏面有dll，用於提早打包咱們經常使用的庫的一個工具，加快咱們的編譯時間的 3.dist：打包後的代碼 4.src/utils：用於開發主管放置公共函數的地方 5.src/work：開發組員用於開發業務的地方（page：每一個頁面都放在這裏面，router：路由的數據結構都在這裏，server：全部的ajax請求都寫在這裏，方便後續複用，components用於存放複用組件的地方，images存放圖片，圖片能夠在頁面直接import引用，common是用於存放業務中公共的函數的與業務緊密結合的這種） 6..eslintrc.js是eslint的配置文件 7.webpack.config.babel.js是webpack的配置文件，支持es6寫法 8.webpack.dll.config.js是用於打包dll的配置文件，你也能夠將庫打包進去，加快整個項目的編譯時間

項目適用對象

1.團隊式協做：由一個主管負責項目的總體環境，src/work之外各個文件的維護，好比config，webpack，mock，utils之類的，團隊成員負責項目的業務部分src/work不須要關注此之外的部分，有任何問題能夠諮詢主管 2.適用項目：適用於antd pro項目以外的全部項目，和嫌antd pro過於龐大的項目，簡單說就是，不想用antd pro的，均可以用這個開發項目 3.後續：本項目是一個架構基礎，旨在更簡單的讓全部用戶在項目架構階段，簡化工做，而且讓全部團隊成員更快的熟悉這個架構，將更多的精力放在分析需求和代碼實現上，本人有一攬子的從需求發起到項目上線的流程優化系統，將在後續的博客中一一分享，同時也會有各種配套工具的分享

使用方法（建議使用yarn，儘可能不要用cnpm）：

安裝模塊：npm install  

開發模式：npm start  

打包：npm run build

訪問地址：http://localhost:3012
複製代碼

注意以及搭建環境時問題彙總

1.若是在build或者start的時候出現node-sass之類的報錯，可使用 npm rebuild node-sass來處理下，再build或start，也能夠參考地址。

打包上線

• 在項目開始以前，在config文件夾中，配置你的項目的各類環境，這些環境都是項目在開發和上線時都須要用到的

• 打包後直接將build文件夾提交至大家項目得根目錄中

• 命令而且呵斥大家得後端人員，將404指向build/index.html，這樣基本就能夠愉快得查看了

• 若是在上線後首屏調用速度較慢，這樣得狀況得話，能夠鞭撻後端人員，開啓服務器得gzip壓縮功能將js壓縮一下，壓縮後大小基本只有原來得三分之一，這個很實用

• 還有本身打包代碼發佈到nginx的方法：地址

但願

• 本項目是根據react社區一些朋友分享得腳手架綜合，而且實際項目運用後所得出得經驗
• 朋友們若是有一些對本項目得建議，或者想法歡迎issues，將持續改進