分享一個react單頁應用腳手架

項目技術棧：react16+react-router4+antd-mobile2+mobx+axios+webpack4
項目github地址：https://github.com/longtoken/...
https://github.com/longtoken/...
項目演示：https://frontendfunny.site

如今比較流行的react腳手架應該是create-react-app，由Facebook官方開發。咱們能夠發現用create-react-app生成的項目的目錄結構是比較簡潔的：

須要咱們本身根據實際的項目狀況去建立對應的目錄結構。網上關於react項目的目錄結構也不少，那應該怎麼合理地去組織咱們的目錄結構呢？

爲了處理這個問題，我參考了一些react項目，而後把它們的優勢結合起來，最後寫了這個腳手架。

lt-self-cli是參照create-react-app的源碼，去掉了其中關於下載模塊的代碼。用來生成咱們的項目。

咱們首先全局安裝一下這個模塊：
打開Windows PowerShell(mac的話打開終端)，而後執行npm install -g lt-self-cli

而後就能夠在本身的工做目錄使用命令 lt-self-cli myapp

工做目錄下就會生成一個叫myapp的文件夾，咱們用cd myapp進入該目錄

進入myapp目錄後使用npm install安裝模塊，使用npm start就能夠啓動項目了。

咱們先看看這個項目的目錄結構：

config目錄裏面存放的是webpack各個環境的編譯文件
src目錄裏面是咱們主要的開發文件
components目錄存放的是containers引用的組件
containers目錄存放的是react-router的路由組件
router目錄存放的是項目的路由配置
static目錄存放的是項目的靜態文件
stores目錄存放的是項目的mobx文件
utils目錄裏面是一些工具函數，目前寫了一個axios的封裝

使用npm run build進行編譯，編譯後的目錄：

基本的生產配置都加上了，好比：
css文件使用了autoprefixer自動添加瀏覽器私有前綴並用mini-css-extract-plugin提取出來，使用link標籤加載。
react-router作了按需加載，把新增路由添加到router配置便可。
webpack-bundle-analyzer用於查看打包以後各個模塊的體積大小，在webpack生產配置文件build.js中的plugins裏面加上new BundleAnalyzerPlugin()便可使用。

目前該項目使用的是mobx做爲數據管理方案，mobx使用起來比redux簡單，開發起來比較快，沒有那麼多的模板代碼。
而redux用起來就麻煩了，除了要寫一堆模板代碼以外，還須要引入redux-thunk或者redux-saga去處理異步問題。而後爲了優化性能還會引入immutable.js。
固然redux比起mobx是更加符合react的思想，並且如今多數項目都是react+redux的模式。因此後面會用redux再寫一版。

該項目會持續更新，有任何問題均可以指出。以爲有幫助的能夠在github上點個Star，謝謝♪(･ω･)ﾉ。