亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

從零開始開發(fā)一個(gè)react腳手架（四）

Kosmos / 1152人閱讀

摘要：根據(jù)配置經(jīng)驗(yàn)，還需要配置一個(gè)，根據(jù)我實(shí)際的測(cè)試結(jié)果，不用手動(dòng)加入這個(gè)也可以實(shí)現(xiàn)熱更新。我們公司的腳手架沒(méi)用這個(gè)結(jié)果，導(dǎo)致自己額外增添了很多配置。，走到這里，我們會(huì)發(fā)現(xiàn)只實(shí)現(xiàn)了第一步頁(yè)面自動(dòng)刷新。很細(xì)，很有意思從零開始開發(fā)一個(gè)腳手架五

這一篇可能主要講的是熱更新，寫的很細(xì)，遇到很多有意思的地方，一一和大家講解下。

前沿：webpack-dev-server支持熱更新，簡(jiǎn)單的說(shuō)就是你修改代碼，瀏覽器能夠自動(dòng)刷新頁(yè)面。

先看一段代碼截圖

webpack-dev-server的配置。

historyApiFallback設(shè)置為true,有點(diǎn)類似于app.get("*", index)，就是一個(gè)兜底的路由，保證所有未攔截的404頁(yè)面都轉(zhuǎn)向index。

contentBase 設(shè)置的就是dist目錄，即webpack打包的dist目錄，所以開啟webpack-dev-server之前，必須打包一下，不然找不到index.html文件。

inline設(shè)置為true,更新文件后刷新頁(yè)面

hot設(shè)置為true，只更新改動(dòng)模塊，因?yàn)槲覀冇玫氖茿PI方式允許webpack-dev-server，所以配置項(xiàng)目中必須設(shè)置port和host，否則會(huì)報(bào)錯(cuò)。

重點(diǎn)：基本配置完成后，在增加一段代碼到webpack的entry里面

因?yàn)槲覀冏叩氖茿PI，而webpackDevServer里面已經(jīng)提供了以方法addDevServerEntrypoints實(shí)現(xiàn)。只需要傳遞兩個(gè)配置參數(shù)即可。他的效果如圖，我打印出了webpackConfig

說(shuō)白了就是手動(dòng)把熱更新的兩個(gè)JS文件插入到了entry中，一并打包。如果我們手動(dòng)寫的webpack.config.js，就應(yīng)該明白這點(diǎn)。所以這個(gè)API還是很方便的。

其實(shí)走到這里就能實(shí)現(xiàn)頁(yè)面自動(dòng)刷了。but...
根據(jù)配置經(jīng)驗(yàn)，還需要配置一個(gè)

plugins.push(new webpack.HotModuleReplacementPlugin());

but，根據(jù)我實(shí)際的測(cè)試結(jié)果，不用手動(dòng)加入這個(gè)plugin也可以實(shí)現(xiàn)熱更新。原因就跟我上面說(shuō)的一樣，API自動(dòng)加上了這個(gè)配置。我們公司的腳手架沒(méi)用這個(gè)API結(jié)果，導(dǎo)致自己額外增添了很多配置。

BUT，走到這里，我們會(huì)發(fā)現(xiàn)只實(shí)現(xiàn)了第一步頁(yè)面自動(dòng)刷新。如果我們開發(fā)的是react應(yīng)用就遠(yuǎn)遠(yuǎn)不夠了。因?yàn)橐坏╉?xiàng)目大起來(lái)，刷新頁(yè)面將會(huì)是一件非常非常耗時(shí)的事情，尤其是當(dāng)涉及到服務(wù)器端渲染的時(shí)候。

要實(shí)現(xiàn)類似于懶更新的功能，需要引入react-hot-loader。引入最新版本，根據(jù)文檔，只需要配置兩個(gè)地方即可。
腳手架的babel配置，增加一個(gè)plugin react-hot-loader/babel

然后在我們的項(xiàng)目目錄中cli-view 中包裹一層Root.jsx

至此就能完美的實(shí)現(xiàn)開發(fā)環(huán)境的自動(dòng)的更新了，更改代碼，能夠?qū)崿F(xiàn)刷新當(dāng)前更改的module，而不是刷新整個(gè)頁(yè)面。
其實(shí)還有一個(gè)小小的疑問(wèn)，在測(cè)試過(guò)程中，我即便不加上 react-hot-loader/babel這個(gè)plugin，也能夠?qū)崿F(xiàn)懶更新，只需要在項(xiàng)目目錄中配置即可?？戳讼逻@個(gè)plugin的源碼，沒(méi)看出所以然來(lái)，我猜測(cè)這個(gè)plugin,是不是說(shuō)懶啟動(dòng)的時(shí)候，保證能走一遍babel編譯？ 有待大佬驗(yàn)證?。?！。

順便簡(jiǎn)單說(shuō)下proxy，一般而言調(diào)用后臺(tái)接口都會(huì)報(bào)跨域，但設(shè)置了proxy，類似于在node層做了一次服務(wù)轉(zhuǎn)發(fā)。

我把原本cli-view目錄下的webpack.config.js改成了app.config.js。我把所有的配置都放在了這個(gè)文件里面。我本地啟用了一個(gè)端口8888的服務(wù)，而我的cli-view的port是3000，當(dāng)我請(qǐng)求API后，所有的/api前綴的請(qǐng)求都轉(zhuǎn)到了8888下。

到了這里關(guān)于webpack-dev-server的內(nèi)容就差不多了。很細(xì)，很有意思

從零開始開發(fā)一個(gè)react腳手架（五）

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/103499.html

相關(guān)文章

  • 從零開始開發(fā)一個(gè)react腳手架（三）

    摘要：前面兩篇文都只是鋪墊，今天至少要實(shí)現(xiàn)一個(gè)簡(jiǎn)單的開始之前再說(shuō)一下墊片和。我一開始以為會(huì)在引入，但并不是。這是我的，當(dāng)然以后會(huì)拆出來(lái)，作為目錄下的一個(gè)執(zhí)行文件。里面就配置了一個(gè)。下一篇從零開始開發(fā)一個(gè)腳手架四 前面兩篇文都只是鋪墊，今天至少要實(shí)現(xiàn)一個(gè)簡(jiǎn)單react的hello word 開始之前再說(shuō)一下墊片和presets。 前幾天突發(fā)疑問(wèn)，create-react-app是怎么做的墊片，...

    wums 評(píng)論0 收藏0

  • 從零開始開發(fā)一個(gè)react腳手架（五）

    摘要：關(guān)于和，其實(shí)單純問(wèn)兩者的區(qū)別，大家都知道，一個(gè)是開發(fā)依賴，一個(gè)是線上依賴。因?yàn)橐婚_始的開發(fā)不規(guī)范，導(dǎo)致我隨意亂裝。。一個(gè)包可以再大點(diǎn)。腳手架已經(jīng)實(shí)現(xiàn)了三分之一，現(xiàn)在是直接來(lái)作為腳手架，到最后效果應(yīng)該是的形式，不過(guò)命令內(nèi)容已經(jīng)實(shí)現(xiàn)和。 前言：最近天天加班做新項(xiàng)目，Taro版的小程序，還要實(shí)現(xiàn)富文本加海報(bào)，踩了不少坑，下次專門開個(gè)坑說(shuō)一下。 回到腳手架，說(shuō)實(shí)話從頭寫一個(gè)，即便是參考crea...

    gekylin 評(píng)論0 收藏0

  • 從零開始開發(fā)一個(gè)react腳手架(二)

    摘要：弄清之后，就去腳手架源代碼里面找。這樣更加靈活，而且復(fù)用性高，起新項(xiàng)目，如果差別不大，幾乎可以做到零配置，這樣開發(fā)者壓根就不需要關(guān)心業(yè)務(wù)之外的東西從零開始開發(fā)一個(gè)腳手架三 上一篇已經(jīng)初步整了個(gè)kkk-react，這一篇不寫代碼，粗略講解下create-react-app的部分源碼。 前沿：科普下看源碼的思路。以本人看過(guò)N多源碼的經(jīng)驗(yàn)總結(jié)，想要看這種腳手架或者npm包的源碼，第一步就是看...

    Y3G 評(píng)論0 收藏0

  • 從零開始開發(fā)一個(gè)react腳手架(一)

    摘要：第一步創(chuàng)建兩個(gè)項(xiàng)目這個(gè)是腳手架項(xiàng)目，腳手架說(shuō)白點(diǎn)就是項(xiàng)目了，但要時(shí)時(shí)看效果，總不能一直到，所以需要。但因?yàn)槭情_發(fā)腳手架啊，這一步可以放到最后來(lái)弄，先把打包構(gòu)建的步驟弄好。 前沿： 腳手架工具一大堆，但如果全部用第三方的腳手架，項(xiàng)目做起來(lái)肯定束手束腳，想來(lái)點(diǎn)差異化的東西都很難，所以最好是整一份自己的腳手架工具，想咋玩咋玩。閱讀了next腳手架和create-react-app腳手架源碼，...

    lylwyy2016 評(píng)論0 收藏0

  • 前端之從零開始系列

    摘要：只有動(dòng)手，你才能真的理解作者的構(gòu)思的巧妙只有動(dòng)手，你才能真正掌握一門技術(shù)持續(xù)更新中項(xiàng)目地址求求求源碼系列跟一起學(xué)如何寫函數(shù)庫(kù)中高級(jí)前端面試手寫代碼無(wú)敵秘籍如何用不到行代碼寫一款屬于自己的類庫(kù)原理講解實(shí)現(xiàn)一個(gè)對(duì)象遵循規(guī)范實(shí)戰(zhàn)手摸手，帶你用擼 Do it yourself!!! 只有動(dòng)手，你才能真的理解作者的構(gòu)思的巧妙 只有動(dòng)手，你才能真正掌握一門技術(shù) 持續(xù)更新中…… 項(xiàng)目地址 https...

    Youngdze 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<