資訊專欄INFORMATION COLUMN
摘要：前面兩篇文都只是鋪墊，今天至少要實(shí)現(xiàn)一個(gè)簡(jiǎn)單的開始之前再說一下墊片和。我一開始以為會(huì)在引入，但并不是。這是我的，當(dāng)然以后會(huì)拆出來，作為目錄下的一個(gè)執(zhí)行文件。里面就配置了一個(gè)。下一篇從零開始開發(fā)一個(gè)腳手架四
前面兩篇文都只是鋪墊，今天至少要實(shí)現(xiàn)一個(gè)簡(jiǎn)單react的hello word
開始之前再說一下墊片和presets。 前幾天突發(fā)疑問，create-react-app是怎么做的墊片，因?yàn)楹芏嗾Z法或者API不一定兼容所有瀏覽器，所以需要有墊片(polyfill)去幫我們做兼容。我一開始以為會(huì)在entry引入@babel/polyfill，但并不是。而是引入了一個(gè)babel-preset-react-app。
如果有自己寫webpack配置的經(jīng)驗(yàn)，應(yīng)該明白我們配置babel的時(shí)候，引入了許多的preset和一些plugins，比如@babel/preset-env,@babel/preset-react, @babel/plugin-proposal-object-rest-spread(支持對(duì)象展開符) @babel/plugin-syntax-dynamic-import（支持異步import語法）等等，還有很多。但是這個(gè)presets集合了很多很多preset，這樣我們就沒必要分別引入了。
可以看到這個(gè)preset里面還有 @babel/runtime 這個(gè)就是墊片庫(kù)了，結(jié)合這個(gè) @babel/plugin-transform-runtime可以做到按需加載墊片庫(kù)，具體和@babel/polyfill的差別就不說了，自己去查詢文章。
參考create-react-app，我簡(jiǎn)化了他的N多目錄和結(jié)構(gòu)，去掉了很多的兼容拓展。當(dāng)然先只是簡(jiǎn)單實(shí)現(xiàn)了一個(gè)類似于npm run start。
這是我的index.js，當(dāng)然以后會(huì)拆出來，作為bin目錄下的一個(gè)執(zhí)行文件。
cli-view
當(dāng)執(zhí)行 node ./src/cs.js,就會(huì)進(jìn)行打包構(gòu)建了。
會(huì)自動(dòng)打開默認(rèn)瀏覽器
簡(jiǎn)單說下三個(gè)文件webpackConfig，devServerConfig，config。
當(dāng)然了應(yīng)為還只是最初版本，很多細(xì)節(jié)功能壓根沒有。
先說下config.js
這個(gè)就是單純的cache一些環(huán)境配置，當(dāng)然我仍然依賴了一下webpack.config.js，其實(shí)這個(gè)是純粹一個(gè)暴露在項(xiàng)目中的配置文件，它也可以叫其他名字例如app.config.js之類的。
里面就配置了一個(gè)entry。create-react-app貌似默認(rèn)去的就是src下的index.jsx，其實(shí)我們也可以這樣玩，但我覺得暴露個(gè)entry的入口配置，靈活性更高點(diǎn)。畢竟我們還可以玩多頁面。至于到底怎么整，大家可以自己取舍。
createWebpack.js里面就是我們平?？吹降呐渲梦募恕?/p>
這里有幾個(gè)細(xì)節(jié)要提一下，1 比如寫配置loader的時(shí)候，我一開始直接babel-loader，報(bào)錯(cuò)找不到babel-loader,我估摸著是它的邏輯是走到了項(xiàng)目目錄下去找了，而我的項(xiàng)目目錄沒有安裝這個(gè)，所以我按照create-react-app的來，加上了require.resove，估計(jì)走的就是腳手架的node_modules去找babel-loader，就沒報(bào)錯(cuò)了。 2 babel的presets我也直接用的是babel-preset-react-app（其實(shí)就是幾個(gè)preset的集合）3 寫腳手架的時(shí)候稍微注意下目錄，別搞混了，比如process.cwd()，__dirname之類的。
createDevServer就最簡(jiǎn)單了，就是一個(gè)簡(jiǎn)單的serve配置了。但后續(xù)應(yīng)該還要加上代理之類的。因?yàn)楝F(xiàn)在自己手上的項(xiàng)目都是引入了node，用不到webpack-dev-server。我估計(jì)用這個(gè)調(diào)用后臺(tái)接口的時(shí)候，要么自己起nginx項(xiàng)目做轉(zhuǎn)發(fā)，不然就在這里設(shè)置proxy。不然跨域。
雖然看起來簡(jiǎn)單，但真正自己敲著代碼來，還是會(huì)發(fā)現(xiàn)好多細(xì)節(jié)問題。因?yàn)楣δ苓€非常不完整，比如css,熱加載都還沒有就暫時(shí)不放到git上了。但下一期完善功能就放上去。
下一篇 從零開始開發(fā)一個(gè)react腳手架（四）
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/103292.html
摘要：弄清之后，就去腳手架源代碼里面找。這樣更加靈活，而且復(fù)用性高，起新項(xiàng)目，如果差別不大，幾乎可以做到零配置，這樣開發(fā)者壓根就不需要關(guān)心業(yè)務(wù)之外的東西從零開始開發(fā)一個(gè)腳手架三 上一篇已經(jīng)初步整了個(gè)kkk-react，這一篇不寫代碼，粗略講解下create-react-app的部分源碼。 前沿：科普下看源碼的思路。以本人看過N多源碼的經(jīng)驗(yàn)總結(jié)，想要看這種腳手架或者npm包的源碼，第一步就是看...
摘要：關(guān)于和，其實(shí)單純問兩者的區(qū)別，大家都知道，一個(gè)是開發(fā)依賴，一個(gè)是線上依賴。因?yàn)橐婚_始的開發(fā)不規(guī)范，導(dǎo)致我隨意亂裝。。一個(gè)包可以再大點(diǎn)。腳手架已經(jīng)實(shí)現(xiàn)了三分之一，現(xiàn)在是直接來作為腳手架，到最后效果應(yīng)該是的形式，不過命令內(nèi)容已經(jīng)實(shí)現(xiàn)和。 前言：最近天天加班做新項(xiàng)目，Taro版的小程序，還要實(shí)現(xiàn)富文本加海報(bào)，踩了不少坑，下次專門開個(gè)坑說一下。 回到腳手架，說實(shí)話從頭寫一個(gè)，即便是參考crea...
摘要：第一步創(chuàng)建兩個(gè)項(xiàng)目這個(gè)是腳手架項(xiàng)目，腳手架說白點(diǎn)就是項(xiàng)目了，但要時(shí)時(shí)看效果，總不能一直到，所以需要。但因?yàn)槭情_發(fā)腳手架啊，這一步可以放到最后來弄，先把打包構(gòu)建的步驟弄好。 前沿： 腳手架工具一大堆，但如果全部用第三方的腳手架，項(xiàng)目做起來肯定束手束腳，想來點(diǎn)差異化的東西都很難，所以最好是整一份自己的腳手架工具，想咋玩咋玩。閱讀了next腳手架和create-react-app腳手架源碼，...
摘要：根據(jù)配置經(jīng)驗(yàn)，還需要配置一個(gè)，根據(jù)我實(shí)際的測(cè)試結(jié)果，不用手動(dòng)加入這個(gè)也可以實(shí)現(xiàn)熱更新。我們公司的腳手架沒用這個(gè)結(jié)果，導(dǎo)致自己額外增添了很多配置。，走到這里，我們會(huì)發(fā)現(xiàn)只實(shí)現(xiàn)了第一步頁面自動(dòng)刷新。很細(xì)，很有意思從零開始開發(fā)一個(gè)腳手架五 這一篇可能主要講的是熱更新，寫的很細(xì)，遇到很多有意思的地方，一一和大家講解下。 前沿：webpack-dev-server支持熱更新，簡(jiǎn)單的說就是你修改...
摘要：通過文件可以對(duì)圖標(biāo)名稱等信息進(jìn)行配置。注意，注冊(cè)的只在生產(chǎn)環(huán)境中生效，并且該功能只有在下才能有效果該文件是過濾文件配置該文件是描述文件定義了項(xiàng)目所需要的各種模塊，以及項(xiàng)目的配置信息比如名稱版本許可證等元數(shù)據(jù)。 一、 快速開始： 全局安裝腳手架： $ npm install -g create-react-app 通過腳手架搭建項(xiàng)目： $ create-react-app 開始項(xiàng)目： ...
閱讀 2966·2021-10-26 09:48
閱讀 1867·2021-09-22 15:22
閱讀 4291·2021-09-22 15:05
閱讀 800·2021-09-06 15:02
閱讀 2693·2019-08-30 15:52
閱讀 2189·2019-08-29 18:38
閱讀 2841·2019-08-28 18:05
閱讀 2391·2019-08-26 13:55
