從零開始開發一個react腳手架（五）

前言：最近每天加班作新項目，Taro版的小程序，還要實現富文本加海報，踩了很多坑，下次專門開個坑說一下。 回到腳手架，說實話從頭寫一個，即使是參考create-react-app，仍是遇到了不少不少問題，這些都是須要本身親自寫過，纔能有所體會。
此次會寫的有雜亂一點，就說說本身遇到的哪些問題。雖然尚未所有完工，可是已經可以基本使用，最下面會貼git地址

問題一 如今基本實現了兩個命令，start和build，start就是啓動webpack-dev-server，這是開發環境, build就是構建，是production環境。 無論什麼命令都須要依賴 NODE_ENV=development或者production，這樣會致使每次npm run 的時候都要加上NODE_ENV,並且這個還不能直接寫在script命令裏面，由於window是不支持，須要安裝第三方庫。最後參考create-react-app

直接賦值，簡單粗暴。 一開始沒想到能夠這麼簡單粗暴，走了歪路，想要經過DefinePlugin來實現賦值，但其實這反卻是錯誤的路線。須要理解編譯工具所依賴的NODE_ENV和業務代碼裏面的NODE_ENV是不一樣的，DefinePlugin其實就是個簡單的全局變量替換，只能替換chunk裏面的。

問題二 優化createWebpack，一開始的作法極爲簡單，直接export一個對象，致使靈活性不好，後來改爲導出一個方法，接收各類配置參數，返回一個webpackConfig。

問題三 webpack-dev-serve，這個問題搗鼓了好久好久。關於webpack-dev-serve的contentBase配置。一開始我設置的是dist目錄，也就是打包後的目錄，即output設置的path。由於之前都是這樣玩的，可是這樣意味着服務依賴了一個打包構建後的目錄dist，不然沒有辦法找到index.html。這樣就很詭異，難道第一次start都必須先build一下嗎？很不合理，並且build的時候NODE_ENV必須是development，不然js的引用地址就成了線上地址。而根據上面一個問題，簡單粗暴在代碼裏面寫死NODE_ENV就很難改變環境變量了，build出來的只能是線上。
看了好久的create-react-app的源碼，由於這個腳手架並不須要先build，一開始覺得他在start的時候作了什麼特殊處理，後來才發現壓根不是，它的webpack-dev-server配置的cotentbase居然不是dist，而是原始目錄src/index.html。。。
這樣我很震驚啊，由於我想的是，js什麼的，css什麼的引入都必須是在webpack build以後才知道的，由於會作拆分剝離的處理，JS的文件個數和名字不肯定，若是引入的是原始目錄，那麼究竟是在哪兒作的JS和CSS插入操做呢，爲此尋遍了源碼，一個個去找plugin，但最後發現其實壓根很簡單。
在於html-webpack-plugin，貌似它會先在內存中生成一份html,想要訪問內存地址直接就是
localhost:3000，而webpack-dev-server應該是優先去取內存中的index.html，沒取到就會去cotentbase中找，也就是說和cotentbase壓根沒有半毛錢關係。
產生錯覺的緣由在於，內存中沒找到，而cotentbase中一樣沒找到，就會報404。至於爲嘛沒有取到內存中的值，在於我閒的沒事，設置了publicPath，爲/assets/這樣致使，想要訪問html的地址就變成了localhost:3000/assets/index.html。其實開發環境壓根不必設置assets，沒半毛錢做用。

問題四 這個就是很蠢的一個問題了，很粗心。關於dependencies和devDependencies，其實單純問二者的區別，你們都知道，一個是開發依賴，一個是線上依賴。可是咱們實際開發中，不論是你開發依賴仍是線上依賴，其實全部的包都會安裝，因此有的時候裝錯地方，也沒啥的。but。。。若是你開發的是第三方包，這個問題就大了。。。若是是第三方包，只會安裝第三方包的dependencies。由於一開始的開發不規範，致使我隨意亂裝。。結果查了半天，一直報XXX包找不到。。搗鼓了好久，才發現是個這麼簡單的問題。

問題五 關於npm publishi的時候若是報權限或者什麼其餘問題的錯，十有八九是 設定了源的路徑，若是是淘寶源或者公司源，須要切換回npm默認源，才能夠發佈。

問題暫時就想到這麼多了。其實腳手架最簡單的反而是webpack配置了，這些東西一搜索網上一大把，配置消息我就很少說了。說幾個值得注意的地方。。第一就是splitChunks，這個設置拆包大小的時候記得注意單位，30000這個是30kb。因此我寫的是100000,意味着要拆成獨立的包，壓縮前必須有100KB，其實還能夠設置大一點，你想一想100KB壓縮後估計就50，再來個GZIP就是20KB左右了。一個包能夠再大點。
但若是是http2，也能夠不用拆太大，畢竟多路複用嗎。 第二就是關於靜態資源引用的問題，其實我以爲本地業務代碼裏面徹底不用引入靜態資源，統統丟到雲服務器就好，好比靜態圖片，我都是統統扔到七牛服務器，代碼裏面直接寫死，爽歪歪，還能享受CDN加成和http2.

react+router+redux

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

腳手架已經實現了三分之一，如今是直接clone git來做爲腳手架，到最後效果應該是npx的形式，不過命令內容已經實現 easy-react start和 easy-react build。
代碼已經更新到git了，方便給個star。 easy-react即命令的實現源碼還沒扔上去，等後續完工了再扔上去。畢竟還有服務器端的部分沒實現。

腳手架工具不少，我以爲有時間仍是本身維護一份的好，想咋玩就咋玩，想升級就升級，本身定製。

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

有問題就留言，一定回覆，給個讚唄