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