資訊專欄INFORMATION COLUMN
摘要：搭建多頁(yè)面應(yīng)用在往下看之前請(qǐng)確保先上個(gè)涼的吃著目錄結(jié)構(gòu)編譯結(jié)果配置文件腳本存放處項(xiàng)目開(kāi)發(fā)中一些常用的方法主要存放和請(qǐng)求有關(guān)的靜態(tài)文件模版文件項(xiàng)目開(kāi)發(fā)中一些常用的方法其實(shí)我覺(jué)得可以和放在一塊，但是個(gè)人習(xí)慣還是分開(kāi)啦開(kāi)始擼代碼如何創(chuàng)建多頁(yè)面應(yīng)用
webpack4 搭建 react 多頁(yè)面應(yīng)用
在往下看之前請(qǐng)確保nodejs > 8.X
先上個(gè)涼的吃著
目錄結(jié)構(gòu).
├── dist # 編譯結(jié)果
├── build # 配置文件
├── cli # sh腳本存放處
├── src #
├── assets # Store images, icons, ...
├── public # UI components
├── services # 項(xiàng)目開(kāi)發(fā)中一些常用的方法 主要存放和請(qǐng)求有關(guān)的
├── statics # 靜態(tài)文件
├── template # 模版文件
├── utils # 項(xiàng)目開(kāi)發(fā)中一些常用的方法 其實(shí)我覺(jué)得可以和services 放在一塊，但是個(gè)人習(xí)慣還是分開(kāi)啦
└── views # pages
├── .eslintrc # Eslint config
├── .babelrc # babel config
├── .gitignore #
└── package.json #
開(kāi)始擼代碼
如何創(chuàng)建多頁(yè)面應(yīng)用，首先你需要先有一個(gè)單頁(yè)面應(yīng)用進(jìn)行改裝，這里我就不再敲單頁(yè)面應(yīng)用的案例啦～git上有demo，接下來(lái)的多頁(yè)面也是基于上述單頁(yè)面改裝
開(kāi)始大工程
開(kāi)箱即用react 多頁(yè)面
上面是多頁(yè)面應(yīng)用的demo 喜歡的請(qǐng)給個(gè)star
在這不多說(shuō)～只給大家說(shuō)一下一些想法和注意點(diǎn)
單改多 === 大家都知道就是將入口改成多個(gè)，但是具體怎么實(shí)現(xiàn)？
demo中/build/pageEntry.js 文件就是專門處理多入口多頁(yè)面的，我們借助glob 這個(gè)node 模型來(lái)獲取入口文件 glob
獲取完所有的目標(biāo)文件接下來(lái)就是循環(huán)將所有的文件拼到入口上去啦（多頁(yè)面頁(yè)面配置的配置也是相同的道理）記得將webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js下面對(duì)應(yīng)的代碼
到此為止 基本一個(gè)簡(jiǎn)單的多頁(yè)面應(yīng)用已經(jīng)完成啦，但是現(xiàn)在這樣的代碼并不能滿足我們?nèi)粘５拈_(kāi)發(fā)，因?yàn)檫@樣的話我們每一次的開(kāi)發(fā)都要在src/views/下面去創(chuàng)建一個(gè)文件夾，然后一個(gè)一個(gè)的創(chuàng)建文件，哇～想想都好惡心，如果我要是這樣直接給我同事去用，我相信他們會(huì)罵死我～好～為了不讓隊(duì)友罵，那我就想想怎么讓他們一鍵生成
借助shelljs模塊來(lái)簡(jiǎn)化模版的創(chuàng)建
請(qǐng)移步到demo中cli文件夾下面的createHtml.sh
首先我們先在src/template下面建一個(gè)通用的模版
然后就是就是寫一個(gè)腳本實(shí)現(xiàn)指令執(zhí)行的時(shí)候把template復(fù)制到對(duì)應(yīng)的文件夾下面就可以啦～本項(xiàng)目中使用 npm run cli-create 來(lái)創(chuàng)建開(kāi)發(fā)界面
嗯嗯～現(xiàn)在隊(duì)友們不罵我啦～哈哈哈
結(jié)果用了沒(méi)幾天，隊(duì)友又開(kāi)始抱怨啦～需求多啦～頁(yè)面多啦，所以每回啟動(dòng)項(xiàng)目的時(shí)候所有的界面都會(huì)啟動(dòng)，可是每回我只調(diào)試某一個(gè)頁(yè)面，不需要啟動(dòng)這么多～怎么辦怎么辦怎么辦～好吧～那就干唄，還能怎么辦
請(qǐng)移步到demo中build文件夾下面的selectPage.js 文件 好吧～不知道咋說(shuō)～大家自己看吧
現(xiàn)在基本上多頁(yè)面的應(yīng)用大部分主要用于原生應(yīng)用內(nèi)嵌H5頁(yè)面，所以這就涉及到native和H5的通信和H5頁(yè)面在移動(dòng)端的調(diào)試問(wèn)題啦
native和H5的通信可以查看JSBridge
H5頁(yè)面在移動(dòng)端的調(diào)試 我在項(xiàng)目中引用的是eruda.js（用的時(shí)候別忘了在production環(huán)境要禁用哦?。?/p>
最后一點(diǎn)，移動(dòng)端的適配demo中用的是vw，不過(guò)實(shí)際開(kāi)發(fā)中你可以直接去寫px；px轉(zhuǎn)vw也已做好，關(guān)于vw的移動(dòng)端適配大家可以google一下～
總結(jié)語(yǔ)～在放一遍demo鏈接吧，喜歡個(gè)可以給個(gè)星星，灰常感謝，接下來(lái)會(huì)繼續(xù)優(yōu)化，啟動(dòng)之后可以選擇打開(kāi)某一個(gè)界面，也不需要手動(dòng)去輸入文件地址啦～哈哈哈～期待的話給star吧
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/102032.html
摘要：也就是說(shuō)，和是兩個(gè)相互獨(dú)立的處理單元。那么這樣給我們帶來(lái)什么便利呢如果中出錯(cuò)，在中是不被察覺(jué)的。后面加入的入口，不影響入口，所以之前對(duì)的是依然生效的。只需要執(zhí)行，就可以直接看到啦預(yù)覽效果預(yù)覽愛(ài)奇藝效果預(yù)覽最后，歡迎各位 大家伙有沒(méi)有這么一個(gè)煩惱： 想寫一些簡(jiǎn)單的前端Demo，卻被繁瑣的webpack配置給惡心到?于是乎便有了go-js的存在，我們只需要執(zhí)行全局安裝go-js，執(zhí)行g(shù)oj...
摘要：面試如何防騙一份優(yōu)秀的前端開(kāi)發(fā)工程師簡(jiǎn)歷是怎么樣的作為，有哪些一般人我都告訴他，但是他都不聽(tīng)的忠告如何面試前端工程師 更多資源請(qǐng)Star：https://github.com/maidishike... 文章轉(zhuǎn)自：https://github.com/jsfront/mo... 3月份前端資源分享 1. Javascript 使用judge.js做信息判斷 javascript...
摘要：升級(jí)到之后還沒(méi)好好的同步一個(gè)可實(shí)用的架子，接下來(lái)用來(lái)搭建一個(gè)簡(jiǎn)單的的多界面應(yīng)用，廢話不說(shuō)直接擼碼創(chuàng)建工程目錄結(jié)構(gòu)工程目錄結(jié)構(gòu)配置安裝依賴引入打開(kāi)瀏覽器配置文件合并基礎(chǔ)配置一些路徑配置設(shè)置開(kāi)發(fā)環(huán)境 webpack 升級(jí)到4之后還沒(méi)好好的同步一個(gè)可實(shí)用的webpack架子，接下來(lái)用webpack4來(lái)搭建一個(gè)簡(jiǎn)單的react的多界面應(yīng)用，廢話不說(shuō) 直接擼碼 創(chuàng)建工程 $ mkdir dem...
摘要：升級(jí)到之后還沒(méi)好好的同步一個(gè)可實(shí)用的架子，接下來(lái)用來(lái)搭建一個(gè)簡(jiǎn)單的的多界面應(yīng)用，廢話不說(shuō)直接擼碼創(chuàng)建工程目錄結(jié)構(gòu)工程目錄結(jié)構(gòu)配置安裝依賴引入打開(kāi)瀏覽器配置文件合并基礎(chǔ)配置一些路徑配置設(shè)置開(kāi)發(fā)環(huán)境 webpack 升級(jí)到4之后還沒(méi)好好的同步一個(gè)可實(shí)用的webpack架子，接下來(lái)用webpack4來(lái)搭建一個(gè)簡(jiǎn)單的react的多界面應(yīng)用，廢話不說(shuō) 直接擼碼 創(chuàng)建工程 $ mkdir dem...
閱讀 3404·2023-04-26 02:09
閱讀 2722·2021-11-24 09:39
閱讀 3372·2021-11-16 11:52
閱讀 3681·2021-10-26 09:50
閱讀 2841·2021-10-08 10:05
閱讀 2523·2021-09-22 15:25
閱讀 3365·2019-08-30 13:14
閱讀 990·2019-08-29 17:06
