資訊專欄INFORMATION COLUMN
摘要：項(xiàng)目技術(shù)棧項(xiàng)目地址項(xiàng)目演示現(xiàn)在比較流行的腳手架應(yīng)該是，由官方開發(fā)。網(wǎng)上關(guān)于項(xiàng)目的目錄結(jié)構(gòu)也很多，那應(yīng)該怎么合理地去組織我們的目錄結(jié)構(gòu)呢為了處理這個(gè)問題，我參考了一些項(xiàng)目，然后把它們的優(yōu)點(diǎn)結(jié)合起來，最后寫了這個(gè)腳手架。
項(xiàng)目技術(shù)棧：react16+react-router4+antd-mobile2+mobx+axios+webpack4
項(xiàng)目github地址：https://github.com/longtoken/...
https://github.com/longtoken/...
項(xiàng)目演示：https://frontendfunny.site
現(xiàn)在比較流行的react腳手架應(yīng)該是create-react-app，由Facebook官方開發(fā)。我們可以發(fā)現(xiàn)用create-react-app生成的項(xiàng)目的目錄結(jié)構(gòu)是比較簡(jiǎn)潔的：
需要我們自己根據(jù)實(shí)際的項(xiàng)目情況去創(chuàng)建對(duì)應(yīng)的目錄結(jié)構(gòu)。網(wǎng)上關(guān)于react項(xiàng)目的目錄結(jié)構(gòu)也很多，那應(yīng)該怎么合理地去組織我們的目錄結(jié)構(gòu)呢？
為了處理這個(gè)問題，我參考了一些react項(xiàng)目，然后把它們的優(yōu)點(diǎn)結(jié)合起來，最后寫了這個(gè)腳手架。
lt-self-cli是參照create-react-app的源碼，去掉了其中關(guān)于下載模塊的代碼。用來生成我們的項(xiàng)目。
我們首先全局安裝一下這個(gè)模塊：
打開Windows PowerShell(mac的話打開終端)，然后執(zhí)行npm install -g lt-self-cli
然后就可以在自己的工作目錄使用命令 lt-self-cli myapp
工作目錄下就會(huì)生成一個(gè)叫myapp的文件夾，我們用cd myapp進(jìn)入該目錄
進(jìn)入myapp目錄后使用npm install安裝模塊，使用npm start就可以啟動(dòng)項(xiàng)目了。
我們先看看這個(gè)項(xiàng)目的目錄結(jié)構(gòu)：
config目錄里面存放的是webpack各個(gè)環(huán)境的編譯文件
src目錄里面是我們主要的開發(fā)文件
components目錄存放的是containers引用的組件
containers目錄存放的是react-router的路由組件
router目錄存放的是項(xiàng)目的路由配置
static目錄存放的是項(xiàng)目的靜態(tài)文件
stores目錄存放的是項(xiàng)目的mobx文件
utils目錄里面是一些工具函數(shù)，目前寫了一個(gè)axios的封裝
使用npm run build進(jìn)行編譯，編譯后的目錄：
基本的生產(chǎn)配置都加上了，比如：
css文件使用了autoprefixer自動(dòng)添加瀏覽器私有前綴并用mini-css-extract-plugin提取出來，使用link標(biāo)簽加載。
react-router做了按需加載，把新增路由添加到router配置即可。
webpack-bundle-analyzer用于查看打包之后各個(gè)模塊的體積大小，在webpack生產(chǎn)配置文件build.js中的plugins里面加上new BundleAnalyzerPlugin()即可使用。
目前該項(xiàng)目使用的是mobx作為數(shù)據(jù)管理方案，mobx使用起來比redux簡(jiǎn)單，開發(fā)起來比較快，沒有那么多的模板代碼。
而redux用起來就麻煩了，除了要寫一堆模板代碼之外，還需要引入redux-thunk或者redux-saga去處理異步問題。然后為了優(yōu)化性能還會(huì)引入immutable.js。
當(dāng)然redux比起mobx是更加符合react的思想，而且現(xiàn)在多數(shù)項(xiàng)目都是react+redux的模式。所以后面會(huì)用redux再寫一版。
該項(xiàng)目會(huì)持續(xù)更新，有任何問題都可以指出。覺得有幫助的可以在github上點(diǎn)個(gè)Star，謝謝?(?ω?)?。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/95352.html
摘要：所以，我們使用來序列化第二級(jí)參數(shù)，比如張家界這樣做也有個(gè)不好的地方，就是需要，然后特殊字符會(huì)變得比較丑。模塊規(guī)劃模塊與無關(guān)劃分模塊可以很好的拆解功能，化繁為簡(jiǎn)，并且對(duì)內(nèi)隱藏細(xì)節(jié)，對(duì)外暴露少量接口。 本項(xiàng)目地址：react-coat-helloworld react-coat 同時(shí)支持瀏覽器渲染(SPA)和服務(wù)器渲染(SSR)，本 Demo 僅演示瀏覽器渲染，請(qǐng)先了解一下：react...
摘要：前端每周清單第期支付寶前端構(gòu)建工具發(fā)展用加快網(wǎng)頁響應(yīng)速度餓了么升級(jí)實(shí)踐前端前端每周清單前端每周清單專注前端領(lǐng)域內(nèi)容，分為新聞熱點(diǎn)開發(fā)教程工程實(shí)踐深度閱讀開源項(xiàng)目巔峰人生等欄目。 前端每周清單第 12 期：支付寶前端構(gòu)建工具發(fā)展、LinkedIn用Brotli加快網(wǎng)頁響應(yīng)速度、餓了么PWA 升級(jí)實(shí)踐 為InfoQ中文站特供稿件，首發(fā)地址為這里；如需轉(zhuǎn)載，請(qǐng)與InfoQ中文站聯(lián)系。從屬于筆...
摘要：一為什么選擇是當(dāng)前前端應(yīng)用最廣泛的框架。目前來看的生態(tài)系統(tǒng)要比大的多，在等最大的技術(shù)社區(qū)搜索兩者，的搜索結(jié)果是的十倍左右，另外據(jù)近期統(tǒng)計(jì)使用的站點(diǎn)是的幾百倍以上。其中是基于技術(shù)，依然是瀏覽器應(yīng)用。 一、為什么選擇React React是當(dāng)前前端應(yīng)用最廣泛的框架。三大SPA框架 Angular、React、Vue比較。 Angular出現(xiàn)最早，但其在原理上并沒有React創(chuàng)新的性能優(yōu)化...
閱讀 2260·2021-11-16 11:44
閱讀 647·2019-08-30 15:55
閱讀 3279·2019-08-30 15:52
閱讀 3617·2019-08-30 15:43
閱讀 2203·2019-08-30 11:21
閱讀 443·2019-08-29 12:18
閱讀 1952·2019-08-26 18:15
閱讀 476·2019-08-26 10:32
