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

gekylin 發(fā)布于2019-08-23 17:15 / 1049人閱讀

摘要：關(guān)于和，其實(shí)單純問兩者的區(qū)別，大家都知道，一個是開發(fā)依賴，一個是線上依賴。因?yàn)橐婚_始的開發(fā)不規(guī)范，導(dǎo)致我隨意亂裝。。一個包可以再大點(diǎn)。腳手架已經(jīng)實(shí)現(xiàn)了三分之一，現(xiàn)在是直接來作為腳手架，到最后效果應(yīng)該是的形式，不過命令內(nèi)容已經(jīng)實(shí)現(xiàn)和。

前言：最近天天加班做新項(xiàng)目，Taro版的小程序，還要實(shí)現(xiàn)富文本加海報，踩了不少坑，下次專門開個坑說一下。回到腳手架，說實(shí)話從頭寫一個，即便是參考create-react-app，還是遇到了很多很多問題，這些都是需要自己親自寫過，才能有所體會。
這次會寫的有雜亂一點(diǎn)，就說說自己遇到的哪些問題。雖然還沒有全部完工，但是已經(jīng)能夠基本使用，最下面會貼git地址

問題一現(xiàn)在基本實(shí)現(xiàn)了兩個命令，start和build，start就是啟動webpack-dev-server，這是開發(fā)環(huán)境, build就是構(gòu)建，是production環(huán)境。不管什么命令都需要依賴 NODE_ENV=development或者production，這樣會導(dǎo)致每次npm run 的時候都要加上NODE_ENV,而且這個還不能直接寫在script命令里面，因?yàn)閣indow是不支持，需要安裝第三方庫。最后參考create-react-app

直接賦值，簡單粗暴。一開始沒想到可以這么簡單粗暴，走了歪路，想要通過DefinePlugin來實(shí)現(xiàn)賦值，但其實(shí)這反倒是錯誤的路線。需要理解編譯工具所依賴的NODE_ENV和業(yè)務(wù)代碼里面的NODE_ENV是不同的，DefinePlugin其實(shí)就是個簡單的全局變量替換，只能替換chunk里面的。

問題二優(yōu)化createWebpack，一開始的做法極為簡單，直接export一個對象，導(dǎo)致靈活性很差，后來改成導(dǎo)出一個方法，接收各種配置參數(shù)，返回一個webpackConfig。

問題三 webpack-dev-serve，這個問題搗鼓了很久很久。關(guān)于webpack-dev-serve的contentBase配置。一開始我設(shè)置的是dist目錄，也就是打包后的目錄，即output設(shè)置的path。因?yàn)橐郧岸际沁@樣玩的，但是這樣意味著服務(wù)依賴了一個打包構(gòu)建后的目錄dist，否則沒有辦法找到index.html。這樣就很詭異，難道第一次start都必須先build一下嗎？很不合理，而且build的時候NODE_ENV必須是development，否則js的引用地址就成了線上地址。而根據(jù)上面一個問題，簡單粗暴在代碼里面寫死NODE_ENV就很難改變環(huán)境變量了，build出來的只能是線上。
看了很久的create-react-app的源碼，因?yàn)檫@個腳手架并不需要先build，一開始以為他在start的時候做了什么特殊處理，后來才發(fā)現(xiàn)壓根不是，它的webpack-dev-server配置的cotentbase竟然不是dist，而是原始目錄src/index.html。。。
這樣我很震驚啊，因?yàn)槲蚁氲氖牵琷s什么的，css什么的引入都必須是在webpack build之后才知道的，因?yàn)闀霾鸱謩冸x的處理，JS的文件個數(shù)和名字不確定，如果引入的是原始目錄，那么到底是在哪兒做的JS和CSS插入操作呢，為此尋遍了源碼，一個個去找plugin，但最后發(fā)現(xiàn)其實(shí)壓根很簡單。
在于html-webpack-plugin，貌似它會先在內(nèi)存中生成一份html,想要訪問內(nèi)存地址直接就是
localhost:3000，而webpack-dev-server應(yīng)該是優(yōu)先去取內(nèi)存中的index.html，沒取到就會去cotentbase中找，也就是說和cotentbase壓根沒有半毛錢關(guān)系。
產(chǎn)生錯覺的原因在于，內(nèi)存中沒找到，而cotentbase中同樣沒找到，就會報404。至于為嘛沒有取到內(nèi)存中的值，在于我閑的沒事，設(shè)置了publicPath，為/assets/這樣導(dǎo)致，想要訪問html的地址就變成了localhost:3000/assets/index.html。其實(shí)開發(fā)環(huán)境壓根沒必要設(shè)置assets，沒半毛錢作用。

問題四這個就是很蠢的一個問題了，很粗心。關(guān)于dependencies和devDependencies，其實(shí)單純問兩者的區(qū)別，大家都知道，一個是開發(fā)依賴，一個是線上依賴。但是我們實(shí)際開發(fā)中，不管是你開發(fā)依賴還是線上依賴，其實(shí)所有的包都會安裝，所以有的時候裝錯地方，也沒啥的。but。。。如果你開發(fā)的是第三方包，這個問題就大了。。。如果是第三方包，只會安裝第三方包的dependencies。因?yàn)橐婚_始的開發(fā)不規(guī)范，導(dǎo)致我隨意亂裝。。結(jié)果查了半天，一直報XXX包找不到。。搗鼓了很久，才發(fā)現(xiàn)是個這么簡單的問題。

問題五關(guān)于npm publishi的時候如果報權(quán)限或者什么其他問題的錯，十有八九是設(shè)定了源的路徑，如果是淘寶源或者公司源，需要切換回npm默認(rèn)源，才可以發(fā)布。

問題暫時就想到這么多了。其實(shí)腳手架最簡單的反而是webpack配置了，這些東西一搜索網(wǎng)上一大把，配置消息我就不多說了。說幾個值得注意的地方。。第一就是splitChunks，這個設(shè)置拆包大小的時候記得注意單位，30000這個是30kb。所以我寫的是100000,意味著要拆成獨(dú)立的包，壓縮前必須有100KB，其實(shí)還可以設(shè)置大一點(diǎn)，你想想100KB壓縮后估計(jì)就50，再來個GZIP就是20KB左右了。一個包可以再大點(diǎn)。
但如果是http2，也可以不用拆太大，畢竟多路復(fù)用嗎。第二就是關(guān)于靜態(tài)資源引用的問題，其實(shí)我覺得本地業(yè)務(wù)代碼里面完全不用引入靜態(tài)資源，通通丟到云服務(wù)器就好，比如靜態(tài)圖片，我都是通通扔到七牛服務(wù)器，代碼里面直接寫死，爽歪歪，還能享受CDN加成和http2.

react+router+redux

說的有點(diǎn)亂，想到啥寫啥。主要是事件間隔有點(diǎn)久了，最近加班太忙。

腳手架已經(jīng)實(shí)現(xiàn)了三分之一，現(xiàn)在是直接clone git來作為腳手架，到最后效果應(yīng)該是npx的形式，不過命令內(nèi)容已經(jīng)實(shí)現(xiàn) easy-react start和 easy-react build。
代碼已經(jīng)更新到git了，方便給個star。 easy-react即命令的實(shí)現(xiàn)源碼還沒扔上去，等后續(xù)完工了再扔上去。畢竟還有服務(wù)器端的部分沒實(shí)現(xiàn)。

腳手架工具很多，我覺得有時間還是自己維護(hù)一份的好，想咋玩就咋玩，想升級就升級，自己定制。

git init
git clone https://github.com/417673259/...
npm install
npm run start

有問題就留言，必定回復(fù)，給個贊唄