成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

告別webpack react 搭建多頁面之痛

seanHai / 1539人閱讀

摘要：搭建多頁面應(yīng)用在往下看之前請確保先上個涼的吃著目錄結(jié)構(gòu)編譯結(jié)果配置文件腳本存放處項目開發(fā)中一些常用的方法主要存放和請求有關(guān)的靜態(tài)文件模版文件項目開發(fā)中一些常用的方法其實我覺得可以和放在一塊，但是個人習(xí)慣還是分開啦開始擼代碼如何創(chuàng)建多頁面應(yīng)用

webpack4 搭建 react 多頁面應(yīng)用

在往下看之前請確保nodejs > 8.X

先上個涼的吃著

目錄結(jié)構(gòu) 
.
├── dist                   # 編譯結(jié)果
├── build                  # 配置文件
├── cli                    # sh腳本存放處
├── src                    # 
    ├── assets             # Store images, icons, ...
    ├── public             # UI components
    ├── services           # 項目開發(fā)中一些常用的方法 主要存放和請求有關(guān)的
    ├── statics            # 靜態(tài)文件
    ├── template           # 模版文件
    ├── utils              # 項目開發(fā)中一些常用的方法 其實我覺得可以和services 放在一塊，但是個人習(xí)慣還是分開啦
    └── views              # pages
├── .eslintrc              # Eslint config
├── .babelrc               # babel config
├── .gitignore             #
└── package.json           #
開始擼代碼

如何創(chuàng)建多頁面應(yīng)用，首先你需要先有一個單頁面應(yīng)用進(jìn)行改裝，這里我就不再敲單頁面應(yīng)用的案例啦～git上有demo，接下來的多頁面也是基于上述單頁面改裝

開始大工程
開箱即用react 多頁面
上面是多頁面應(yīng)用的demo 喜歡的請給個star

在這不多說～只給大家說一下一些想法和注意點

單改多 === 大家都知道就是將入口改成多個，但是具體怎么實現(xiàn)？

demo中/build/pageEntry.js 文件就是專門處理多入口多頁面的，我們借助glob 這個node 模型來獲取入口文件 glob

獲取完所有的目標(biāo)文件接下來就是循環(huán)將所有的文件拼到入口上去啦（多頁面頁面配置的配置也是相同的道理）記得將webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js下面對應(yīng)的代碼

到此為止 基本一個簡單的多頁面應(yīng)用已經(jīng)完成啦，但是現(xiàn)在這樣的代碼并不能滿足我們?nèi)粘５拈_發(fā)，因為這樣的話我們每一次的開發(fā)都要在src/views/下面去創(chuàng)建一個文件夾，然后一個一個的創(chuàng)建文件，哇～想想都好惡心，如果我要是這樣直接給我同事去用，我相信他們會罵死我～好～為了不讓隊友罵，那我就想想怎么讓他們一鍵生成

借助shelljs模塊來簡化模版的創(chuàng)建

請移步到demo中cli文件夾下面的createHtml.sh

首先我們先在src/template下面建一個通用的模版

然后就是就是寫一個腳本實現(xiàn)指令執(zhí)行的時候把template復(fù)制到對應(yīng)的文件夾下面就可以啦～本項目中使用 npm run cli-create 來創(chuàng)建開發(fā)界面

嗯嗯～現(xiàn)在隊友們不罵我啦～哈哈哈

結(jié)果用了沒幾天，隊友又開始抱怨啦～需求多啦～頁面多啦，所以每回啟動項目的時候所有的界面都會啟動，可是每回我只調(diào)試某一個頁面，不需要啟動這么多～怎么辦怎么辦怎么辦～好吧～那就干唄，還能怎么辦

請移步到demo中build文件夾下面的selectPage.js 文件 好吧～不知道咋說～大家自己看吧

現(xiàn)在基本上多頁面的應(yīng)用大部分主要用于原生應(yīng)用內(nèi)嵌H5頁面，所以這就涉及到native和H5的通信和H5頁面在移動端的調(diào)試問題啦

native和H5的通信可以查看JSBridge

H5頁面在移動端的調(diào)試 我在項目中引用的是eruda.js（用的時候別忘了在production環(huán)境要禁用哦！）

最后一點，移動端的適配demo中用的是vw，不過實際開發(fā)中你可以直接去寫px；px轉(zhuǎn)vw也已做好，關(guān)于vw的移動端適配大家可以google一下～

總結(jié)語～

在放一遍demo鏈接吧，喜歡個可以給個星星，灰常感謝，接下來會繼續(xù)優(yōu)化，啟動之后可以選擇打開某一個界面，也不需要手動去輸入文件地址啦～哈哈哈～期待的話給star吧

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102032.html

相關(guān)文章

  • 告別繁瑣重復(fù)的webpack配置，直接上手?jǐn)]代碼

    摘要：也就是說，和是兩個相互獨立的處理單元。那么這樣給我們帶來什么便利呢如果中出錯，在中是不被察覺的。后面加入的入口，不影響入口，所以之前對的是依然生效的。只需要執(zhí)行，就可以直接看到啦預(yù)覽效果預(yù)覽愛奇藝效果預(yù)覽最后，歡迎各位 大家伙有沒有這么一個煩惱： 想寫一些簡單的前端Demo，卻被繁瑣的webpack配置給惡心到?于是乎便有了go-js的存在，我們只需要執(zhí)行全局安裝go-js，執(zhí)行g(shù)oj...

    gghyoo 評論0 收藏0

  • 3月份前端資源分享

    摘要：面試如何防騙一份優(yōu)秀的前端開發(fā)工程師簡歷是怎么樣的作為，有哪些一般人我都告訴他，但是他都不聽的忠告如何面試前端工程師 更多資源請Star：https://github.com/maidishike... 文章轉(zhuǎn)自：https://github.com/jsfront/mo... 3月份前端資源分享 1. Javascript 使用judge.js做信息判斷 javascript...

    nanchen2251 評論0 收藏0

  • webpack4 + react 搭建多頁面應(yīng)用

    摘要：升級到之后還沒好好的同步一個可實用的架子，接下來用來搭建一個簡單的的多界面應(yīng)用，廢話不說直接擼碼創(chuàng)建工程目錄結(jié)構(gòu)工程目錄結(jié)構(gòu)配置安裝依賴引入打開瀏覽器配置文件合并基礎(chǔ)配置一些路徑配置設(shè)置開發(fā)環(huán)境 webpack 升級到4之后還沒好好的同步一個可實用的webpack架子，接下來用webpack4來搭建一個簡單的react的多界面應(yīng)用，廢話不說 直接擼碼 創(chuàng)建工程 $ mkdir dem...

    nifhlheimr 評論0 收藏0

  • webpack4 + react 搭建多頁面應(yīng)用

    摘要：升級到之后還沒好好的同步一個可實用的架子，接下來用來搭建一個簡單的的多界面應(yīng)用，廢話不說直接擼碼創(chuàng)建工程目錄結(jié)構(gòu)工程目錄結(jié)構(gòu)配置安裝依賴引入打開瀏覽器配置文件合并基礎(chǔ)配置一些路徑配置設(shè)置開發(fā)環(huán)境 webpack 升級到4之后還沒好好的同步一個可實用的webpack架子，接下來用webpack4來搭建一個簡單的react的多界面應(yīng)用，廢話不說 直接擼碼 創(chuàng)建工程 $ mkdir dem...

    wushuiyong 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<