一般create-react-app后出來的項目總是需要我們配置相關的內(nèi)容才能上真正的環(huán)境筹误。下邊介紹一下配置的內(nèi)容。文最后附上github地址，可直接開箱使用谭跨，喜歡的給個star~
create-react-app mobile
npm install antd-mobile --save
(引入antd-mobile鹃答，常用的UI框架)
npm install babel-plugin-import --save
(按需引入乎澄，添加.babelrc)
npm install dotenv-cli --save-dev
(要在命令行中使用，所以使用 dotenv-cli, dotenv可將環(huán)境變量從 .env 文件加載到 process.env中测摔。)
npm install react-app-rewired --save
(使用react-app-rewired置济，安裝這個工具后解恰，在項目根目錄中新建文件config-overrides.js文件≌阌冢可以不eject操作webpack)
多環(huán)境打包配置
根目錄下創(chuàng)建 .env.development .env.test .env.production配置文件护盈，用以分環(huán)境打包，對應package.json的相關入口
命名規(guī)范：REACT_APP_ + '變量' 如：REACT_APP_BASE_URL
調(diào)用示例: process.env.REACT_APP_BASE_URL
注意事項: 修改配置文件需要重新運行項目
npm install react-router-dom --save
npm install axios --save
npm install redux --save
npm install redux-saga --save
中間件的選擇：redux-thunk VS redux-saga
redux-thunk的優(yōu)缺點
優(yōu)點：簡單羞酗，學習成本低
缺點：使得action不易維護腐宋。
（1）action的形式不統(tǒng)一
（2）就是異步操作太為分散，分散在了各個action中
redux-saga的優(yōu)缺點
優(yōu)點：
（1）集中處理了所有的異步操作檀轨，異步接口部分一目了然
（2）action是普通對象胸竞，這跟redux同步的action一模一樣
（3）通過Effect，方便異步接口的測試
（4）通過worker 和watcher可以實現(xiàn)非阻塞異步調(diào)用参萄，并且同時可以實現(xiàn)非阻塞調(diào)用下的事件監(jiān)聽
（5） 異步操作的流程是可以控制的卫枝，可以隨時取消相應的異步操作。
缺點：太復雜讹挎，學習成本較高
npm install redux-devtools-extension --save
npm install redux-logger --save-dev
npm install http-proxy-middleware --save-dev
(引入本地開發(fā)所需要的反向代理,創(chuàng)建 src/setupProxy.js 文件)
開始配置vw 移動端可以按照設計圖直接寫px自動適配的神器
npm install postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-viewport-units cssnano cssnano-preset-advanced postcss-preset-env --save-dev
npm install react-app-rewire-postcss --save-dev
(這里要注意校赤，使用antd這UI框架的時候，已經(jīng)設置了關鍵字'am'不進行vw處理筒溃，所以命名樣式類名的時候應該避免關鍵詞'am')
(安裝完需要配置config-overrides.js文件马篮，具體看源碼)
npm install node-sass --save-dev
github傳送門：https://github.com/chendishen/react-base-mobile
