先從目錄結(jié)構(gòu)說起，事實(shí)上良好的目錄結(jié)構(gòu)對項(xiàng)目的拓展性有著很大的幫助。
這個是我這個wap App的目錄結(jié)構(gòu)，中間有過一次較大的變化表箭，都是由于前期沒有做好規(guī)劃造成的，這里也只是一個參考钮莲。
actions文件夾
該文件夾包含了所有觸發(fā)數(shù)據(jù)變更的action文件免钻；
components文件夾
該文件夾包含了一些公用的React組件，如按鈕崔拥、Tab极舔；
containers文件夾
這里我放了js入口以及根據(jù)環(huán)境選擇加載文件的Root.js，這里還放置了一些開發(fā)工具組件如DevTool.js握童。當(dāng)然姆怪，一些全局共用的頁面我也放在這里，比如404澡绩；
less文件夾
沒什么好說稽揭，放的全是less文件。
reducer文件夾
所有的reducers處理函數(shù)按大模塊分成幾個文件放這了;
routes文件夾
里面放的是所有頁面文件夾肥卡，涵蓋了頁面組件溪掀、頁面路由信息，大致如下結(jié)構(gòu)
每個模塊文件夾都有index.js步鉴，里面包含了該模塊的路由配置揪胃。
這里我采取拆分這么多文件模塊而不是統(tǒng)一配置頁面路由的原因是為了后面的按需加載璃哟。
這個目錄就是比較關(guān)鍵的部分，該目錄下所有的文件夾index文件都包含了該目錄的路由信息喊递；
使用這種目錄結(jié)構(gòu)我們可以無限往下延伸随闪，便于拓展，同時也方便共同開發(fā)時的合并
static文件夾
這個文件夾我放了一些靜態(tài)文件如圖片骚勘、公用lib铐伴，以及執(zhí)行打包生成后的文件都會在這里；
基本就是打包完之后我就把這個static文件夾上傳即可俏讹。
store文件夾
就是store嘛当宴，我這里也是準(zhǔn)備了configureStore.dev.js和configureStore.prod.js兩個文件來針對開發(fā)環(huán)境和生產(chǎn)環(huán)境。
<pre>
if (process.env.NODE_ENV === 'prod') {
module.exports = require('./configureStore.prod')
} else {
module.exports = require('./configureStore.dev')
}
</pre>
process.env.NODE_ENV 環(huán)境變量我是在npm script執(zhí)行的時候設(shè)置的泽疆，
比如:
<pre>"bundle-test": "set NODE_ENV=prod&&webpack --config webpack.bundle.test.config.js -p --progress --colors"</pre>
另外提一下户矢，當(dāng)時我在寫NODE_ENV=prod&&webpack這里的時候給prod&&webpack中間加了空格，結(jié)果怎么都設(shè)置不了ENV殉疼，折騰了半天才發(fā)現(xiàn)梯浪。。瓢娜。
最后就是index.html了驱证，這個也就是文件入口部分了。
結(jié)尾
大體上和大部分的react應(yīng)用目錄結(jié)構(gòu)區(qū)別并不大恋腕，主要是routes文件夾這里，早期的時候我用了單個routes.js把整個應(yīng)用的路由寫在里面逆瑞，然而最后因?yàn)閷懓葱杓虞d的時候發(fā)現(xiàn)這樣做比較好區(qū)分荠藤，就改成了現(xiàn)在這個樣子，拆了之后也不會像單個文件那么多看的眼花嘛获高。哈肖。。
