一個(gè)經(jīng)過(guò)優(yōu)化的react腳手架，拿來(lái)就能開(kāi)發(fā)

UnixAgain 發(fā)布于2019-08-22 18:35 / 2834人閱讀

摘要：拿來(lái)即用的腳手架沒(méi)有使用，直接走顯性配置，使配置透明。腳手架是我根據(jù)大多數(shù)公司的業(yè)務(wù)，取其共同需求搭建的，并且做了項(xiàng)目?jī)?yōu)化，不管小項(xiàng)目還是大項(xiàng)目都可以很好的支撐。建議項(xiàng)目公共樣式包括框架裝飾頁(yè)使用，頁(yè)面級(jí)樣式采用，以防止樣式污染。

react-ve

拿來(lái)即用的 react 腳手架

沒(méi)有使用create-react-app，直接走webpack顯性配置，使配置透明。

腳手架是我根據(jù)大多數(shù)公司的業(yè)務(wù)，取其共同需求搭建的，并且做了項(xiàng)目?jī)?yōu)化，不管小項(xiàng)目還是大項(xiàng)目都可以很好的支撐。

一點(diǎn)建議

建議使用typescript開(kāi)發(fā)

在數(shù)據(jù)控制方面，推薦你使用ImmutableJs來(lái)控制數(shù)據(jù)，因?yàn)樗?b>react真的是絕配

頁(yè)面經(jīng)常會(huì)存在用戶操作時(shí)出現(xiàn)的組件，比如通過(guò)點(diǎn)擊出現(xiàn)彈框，如果彈框內(nèi)容過(guò)大，推薦你使用async-loadable，它能很方便的獲取按需加載的組件。

在樣式方面，建議公用的樣式使用less直接引用在入口文件中，頁(yè)面級(jí)樣式使用styled-components

優(yōu)化

代碼丑化壓縮

代碼分割(code-splitting) 模板使用基于路由的動(dòng)態(tài)導(dǎo)入

使用 DLL 將公用依賴庫(kù)模塊封裝為一個(gè)獨(dú)立文件

安裝及使用

npm install react-ve -g

react-ve init [projectName]

啟動(dòng)項(xiàng)目

cd [projectName]

yarn 或 npm install

npm run dll

npm start

在瀏覽器地址欄中輸入：localhost:3000即可訪問(wèn)

項(xiàng)目打包，運(yùn)行npm run build即可，項(xiàng)目將打包至dist文件夾內(nèi)

默認(rèn)使用技術(shù)棧：

react

typescript

antd

styled-components

react-router-dom

immutable

你可以根據(jù)喜好來(lái)install或uninstall它們。

建議：

項(xiàng)目公共樣式（包括antd、框架、裝飾頁(yè)）使用less，頁(yè)面級(jí)樣式采
用styled-components，以防止樣式污染。

DLL ：

在webpack.dll.config.babel.js中，默認(rèn)打包的公共包包括：

entry: {
    vendor: ["react", "react-dom", "antd", "react-router-dom", "immutable"]
  }

你可以根據(jù)自己的喜好做刪減

云服務(wù)器 GPU云服務(wù)器刺激戰(zhàn)場(chǎng)就開(kāi)了一個(gè)服務(wù)器 react開(kāi)發(fā)神器阿里云服務(wù)器就一個(gè)c盤(pán)怎么辦 docker react 開(kāi)發(fā)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/96029.html

相關(guān)文章

利用 Nowa 分分鐘創(chuàng)建和維護(hù) React 應(yīng)用，拋棄命令行

摘要：接下來(lái)會(huì)介紹如何使用快速開(kāi)發(fā)應(yīng)用。但是因?yàn)槭墙坛蹋晕覀凕c(diǎn)按鈕創(chuàng)建項(xiàng)目。從創(chuàng)建到啟動(dòng)，不過(guò)一分鐘的事情，是不是超級(jí)方便快捷呢小特性用戶可以在右側(cè)命令集區(qū)添加自定義命令，所有的命令都一鍵運(yùn)行，你都不需要打開(kāi)終端了。前言吐槽前端的技術(shù)發(fā)展辣么快，對(duì)于前端新手來(lái)說(shuō)，我還沒(méi)怎么使用 jQuery 開(kāi)發(fā)界面就要換成Angular & Vue & React & ... 更復(fù)雜的是，用戶還要...

coolpail 2019-08-20 15:49 評(píng)論0 收藏0
淺談MVC,MVP,MVVM漸進(jìn)變化及React與Vue比較

摘要：將注意力集中保持在核心庫(kù)，而將其他功能如路由和全局狀態(tài)管理交給相關(guān)的庫(kù)。此示例使用類似的語(yǔ)法，稱為。執(zhí)行更快，因?yàn)樗诰幾g為代碼后進(jìn)行了優(yōu)化。基于的模板使得將已有的應(yīng)用逐步遷移到更為容易。前言因?yàn)闆](méi)有明確的界定,這里不討論正確與否,只表達(dá)個(gè)人對(duì)前端MV*架構(gòu)模式理解看法,再比較React和Vue兩種框架不同.寫(xiě)完之后我知道這文章好水,特別是框架對(duì)比部分都是別人說(shuō)爛的,而我也是打算把...

DrizzleX 2019-08-26 10:36 評(píng)論0 收藏0
網(wǎng)易音樂(lè)版輪播-react組件版本

摘要：說(shuō)明此版本輪播圖為仿照網(wǎng)易云音樂(lè)播放器上首頁(yè)的輪播。網(wǎng)易的輪播特殊的地方就在于，如果你滑動(dòng)不相鄰的兩張圖片，其過(guò)渡效果并不是滑動(dòng)過(guò)渡，而是一個(gè)跳出過(guò)渡，此方面原理與最開(kāi)始設(shè)計(jì)輪播排版時(shí)候有極大關(guān)聯(lián)。說(shuō)明：此版本輪播圖為仿照網(wǎng)易云音樂(lè)PC播放器上首頁(yè)的輪播。網(wǎng)易的輪播特殊的地方就在于，如果你滑動(dòng)不相鄰的兩張圖片，其過(guò)渡效果并不是滑動(dòng)過(guò)渡，而是一個(gè)跳出過(guò)渡，此方面原理與最開(kāi)始設(shè)計(jì)輪播...

趙春朋 2019-08-30 13:59 評(píng)論0 收藏0
網(wǎng)易音樂(lè)版輪播-react組件版本

摘要：說(shuō)明此版本輪播圖為仿照網(wǎng)易云音樂(lè)播放器上首頁(yè)的輪播。網(wǎng)易的輪播特殊的地方就在于，如果你滑動(dòng)不相鄰的兩張圖片，其過(guò)渡效果并不是滑動(dòng)過(guò)渡，而是一個(gè)跳出過(guò)渡，此方面原理與最開(kāi)始設(shè)計(jì)輪播排版時(shí)候有極大關(guān)聯(lián)。說(shuō)明：此版本輪播圖為仿照網(wǎng)易云音樂(lè)PC播放器上首頁(yè)的輪播。網(wǎng)易的輪播特殊的地方就在于，如果你滑動(dòng)不相鄰的兩張圖片，其過(guò)渡效果并不是滑動(dòng)過(guò)渡，而是一個(gè)跳出過(guò)渡，此方面原理與最開(kāi)始設(shè)計(jì)輪播...

whidy 2019-08-01 18:38 評(píng)論0 收藏0
網(wǎng)易音樂(lè)版輪播-react組件版本

摘要：說(shuō)明此版本輪播圖為仿照網(wǎng)易云音樂(lè)播放器上首頁(yè)的輪播。網(wǎng)易的輪播特殊的地方就在于，如果你滑動(dòng)不相鄰的兩張圖片，其過(guò)渡效果并不是滑動(dòng)過(guò)渡，而是一個(gè)跳出過(guò)渡，此方面原理與最開(kāi)始設(shè)計(jì)輪播排版時(shí)候有極大關(guān)聯(lián)。說(shuō)明：此版本輪播圖為仿照網(wǎng)易云音樂(lè)PC播放器上首頁(yè)的輪播。網(wǎng)易的輪播特殊的地方就在于，如果你滑動(dòng)不相鄰的兩張圖片，其過(guò)渡效果并不是滑動(dòng)過(guò)渡，而是一個(gè)跳出過(guò)渡，此方面原理與最開(kāi)始設(shè)計(jì)輪播...

Tikitoo 2019-08-22 14:47 評(píng)論0 收藏0