資訊專欄INFORMATION COLUMN
摘要：項目技術棧項目地址項目演示現在比較流行的腳手架應該是，由官方開發。網上關于項目的目錄結構也很多，那應該怎么合理地去組織我們的目錄結構呢為了處理這個問題，我參考了一些項目，然后把它們的優點結合起來，最后寫了這個腳手架。
項目技術棧：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，謝謝?(?ω?)?。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95352.html
摘要：所以，我們使用來序列化第二級參數，比如張家界這樣做也有個不好的地方，就是需要，然后特殊字符會變得比較丑。模塊規劃模塊與無關劃分模塊可以很好的拆解功能，化繁為簡，并且對內隱藏細節，對外暴露少量接口。 本項目地址：react-coat-helloworld react-coat 同時支持瀏覽器渲染(SPA)和服務器渲染(SSR)，本 Demo 僅演示瀏覽器渲染，請先了解一下：react...
摘要：前端每周清單第期支付寶前端構建工具發展用加快網頁響應速度餓了么升級實踐前端前端每周清單前端每周清單專注前端領域內容，分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。 前端每周清單第 12 期：支付寶前端構建工具發展、LinkedIn用Brotli加快網頁響應速度、餓了么PWA 升級實踐 為InfoQ中文站特供稿件，首發地址為這里；如需轉載，請與InfoQ中文站聯系。從屬于筆...
摘要：一為什么選擇是當前前端應用最廣泛的框架。目前來看的生態系統要比大的多，在等最大的技術社區搜索兩者，的搜索結果是的十倍左右，另外據近期統計使用的站點是的幾百倍以上。其中是基于技術，依然是瀏覽器應用。 一、為什么選擇React React是當前前端應用最廣泛的框架。三大SPA框架 Angular、React、Vue比較。 Angular出現最早，但其在原理上并沒有React創新的性能優化...
閱讀 2234·2021-11-16 11:44
閱讀 641·2019-08-30 15:55
閱讀 3271·2019-08-30 15:52
閱讀 3595·2019-08-30 15:43
閱讀 2196·2019-08-30 11:21
閱讀 435·2019-08-29 12:18
閱讀 1945·2019-08-26 18:15
閱讀 468·2019-08-26 10:32
