資訊專(zhuān)欄INFORMATION COLUMN
摘要：弄清之后，就去腳手架源代碼里面找。這樣更加靈活，而且復(fù)用性高，起新項(xiàng)目，如果差別不大，幾乎可以做到零配置，這樣開(kāi)發(fā)者壓根就不需要關(guān)心業(yè)務(wù)之外的東西從零開(kāi)始開(kāi)發(fā)一個(gè)腳手架三
上一篇已經(jīng)初步整了個(gè)kkk-react，這一篇不寫(xiě)代碼，粗略講解下create-react-app的部分源碼。
前沿：科普下看源碼的思路。以本人看過(guò)N多源碼的經(jīng)驗(yàn)總結(jié)，想要看這種腳手架或者npm包的源碼，第一步就是看package.json的配置，一般看的就是main.js和script。main.js就是引入npm包后，取的真實(shí)的js文件地址。script就是腳手架命令，類(lèi)似下面create-react-app
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
腳手架看script,npm包看main。
找到script之后，就4個(gè)命令，第一個(gè)start就是開(kāi)啟本地服務(wù)，build就是打包文件，test沒(méi)仔細(xì)看我估計(jì)就是代碼檢查吧，因?yàn)槲覀児镜膖est就是eslint檢查，eject類(lèi)似于生成配置文件之類(lèi)的，因?yàn)樗呐渲米叩氖莂pi,不是webpack配置文件，這個(gè)命令可能就是生成出對(duì)應(yīng)的webpack文件（后面的兩個(gè)沒(méi)細(xì)看，不必太care）。
弄清script之后，就去腳手架源代碼里面找package.json。去這個(gè)文件里面看bin配置，說(shuō)直接一點(diǎn)，為嘛script里面的命令能其效果呢，就是你安裝一個(gè)包之后，如果這個(gè)包里面有bin配置，那么npm就會(huì)去node_modules里面的.bin目錄下生成出對(duì)應(yīng)的執(zhí)行命令文件
作為一個(gè)腳手架工具其實(shí)是可以分為兩部分的。
一是生成對(duì)應(yīng)的dir和file，搭建好環(huán)境，讓我們能直接跑起項(xiàng)目。 這一部分比較簡(jiǎn)單，我們到最后再來(lái)完成這一步（等我們完成自己的腳手架工具之后），類(lèi)似create-create-app myApp之類(lèi)的。
二我感覺(jué)才是關(guān)鍵，是各種命令的實(shí)現(xiàn)，npm run start之類(lèi)，接下來(lái)我會(huì)簡(jiǎn)單的解讀下這一步的源碼。
create-react-app用的是分包管理lerna,這里就不講了。直接找到react-scripts目錄里面的package.json，
可以看到雖然script里面有4條命令，但其實(shí)就是一個(gè)react-scripts命令，后面的只是參數(shù)。
所有運(yùn)行的react-scripts start|test|build，其實(shí)都是在執(zhí)行react-scripts.js。
看源碼其實(shí)解析process.arg，然后解析出參數(shù)，最后執(zhí)行對(duì)應(yīng)的scripts目錄下的文件，我們執(zhí)行的是start，就是start.js文件。
接下來(lái)就是解析這個(gè)start.js源碼了。
這里面有很多參數(shù)判定，代理處理，各種細(xì)節(jié)處理，拋開(kāi)這些，核心其實(shí)就兩個(gè)函數(shù)
一 createCompiler,這個(gè)就是簡(jiǎn)單點(diǎn)就是 new webpack(config)的實(shí)例。因?yàn)槠匠Ｎ覀儗?xiě)的大部分都是配置文件，實(shí)際是執(zhí)行webpack打包的時(shí)候，他也就是讀取配置文件，然后new webpack(config)。
二 第二個(gè)就更簡(jiǎn)單了。讀取各種配置參數(shù)，起一個(gè)服務(wù)，WebpackDevServer。
平常我們都是通過(guò)命令行起一個(gè)服務(wù)，然后配置webpack.config.js里面的devServer，而現(xiàn)在就是通過(guò)API來(lái)實(shí)現(xiàn)。
雖然沒(méi)有講的很細(xì)，但是明顯可以發(fā)現(xiàn)，腳手架說(shuō)白一點(diǎn)就是通過(guò)各種api來(lái)完成我們?cè)拘枰济钚谢蛘吲渲梦募?lái)做的事情。這樣更加靈活，而且復(fù)用性高，起新項(xiàng)目，如果差別不大，幾乎可以做到零配置，這樣開(kāi)發(fā)者壓根就不需要關(guān)心業(yè)務(wù)之外的東西
從零開(kāi)始開(kāi)發(fā)一個(gè)react腳手架(三)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/109256.html
摘要：關(guān)于和，其實(shí)單純問(wèn)兩者的區(qū)別，大家都知道，一個(gè)是開(kāi)發(fā)依賴(lài)，一個(gè)是線(xiàn)上依賴(lài)。因?yàn)橐婚_(kāi)始的開(kāi)發(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)，踩了不少坑，下次專(zhuān)門(mén)開(kāi)個(gè)坑說(shuō)一下。 回到腳手架，說(shuō)實(shí)話(huà)從頭寫(xiě)一個(gè)，即便是參考crea...
摘要：第一步創(chuàng)建兩個(gè)項(xiàng)目這個(gè)是腳手架項(xiàng)目，腳手架說(shuō)白點(diǎn)就是項(xiàng)目了，但要時(shí)時(shí)看效果，總不能一直到，所以需要。但因?yàn)槭情_(kāi)發(fā)腳手架啊，這一步可以放到最后來(lái)弄，先把打包構(gòu)建的步驟弄好。 前沿： 腳手架工具一大堆，但如果全部用第三方的腳手架，項(xiàng)目做起來(lái)肯定束手束腳，想來(lái)點(diǎn)差異化的東西都很難，所以最好是整一份自己的腳手架工具，想咋玩咋玩。閱讀了next腳手架和create-react-app腳手架源碼，...
摘要：前面兩篇文都只是鋪墊，今天至少要實(shí)現(xiàn)一個(gè)簡(jiǎn)單的開(kāi)始之前再說(shuō)一下墊片和。我一開(kāi)始以為會(huì)在引入，但并不是。這是我的，當(dāng)然以后會(huì)拆出來(lái)，作為目錄下的一個(gè)執(zhí)行文件。里面就配置了一個(gè)。下一篇從零開(kāi)始開(kāi)發(fā)一個(gè)腳手架四 前面兩篇文都只是鋪墊，今天至少要實(shí)現(xiàn)一個(gè)簡(jiǎn)單react的hello word 開(kāi)始之前再說(shuō)一下墊片和presets。 前幾天突發(fā)疑問(wèn)，create-react-app是怎么做的墊片，...
摘要：根據(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ì)，很有意思從零開(kāi)始開(kāi)發(fā)一個(gè)腳手架五 這一篇可能主要講的是熱更新，寫(xiě)的很細(xì)，遇到很多有意思的地方，一一和大家講解下。 前沿：webpack-dev-server支持熱更新，簡(jiǎn)單的說(shuō)就是你修改...
摘要：通過(guò)文件可以對(duì)圖標(biāo)名稱(chēng)等信息進(jìn)行配置。注意，注冊(cè)的只在生產(chǎn)環(huán)境中生效，并且該功能只有在下才能有效果該文件是過(guò)濾文件配置該文件是描述文件定義了項(xiàng)目所需要的各種模塊，以及項(xiàng)目的配置信息比如名稱(chēng)版本許可證等元數(shù)據(jù)。 一、 快速開(kāi)始： 全局安裝腳手架： $ npm install -g create-react-app 通過(guò)腳手架搭建項(xiàng)目： $ create-react-app 開(kāi)始項(xiàng)目： ...
閱讀 2786·2021-10-12 10:12
閱讀 2394·2021-09-02 15:41
閱讀 2629·2019-08-30 15:55
閱讀 1469·2019-08-30 13:05
閱讀 2538·2019-08-29 11:21
閱讀 3600·2019-08-28 17:53
閱讀 3105·2019-08-26 13:39
閱讀 847·2019-08-26 11:50
