從零開始開發一個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
有問題就留言，必定回覆，給個讚唄