資訊專欄INFORMATION COLUMN
摘要：關于和，其實單純問兩者的區別，大家都知道，一個是開發依賴，一個是線上依賴。因為一開始的開發不規范，導致我隨意亂裝。。一個包可以再大點。腳手架已經實現了三分之一，現在是直接來作為腳手架，到最后效果應該是的形式，不過命令內容已經實現和。
前言：最近天天加班做新項目，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
有問題就留言，必定回復，給個贊唄
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/104065.html
摘要：根據配置經驗，還需要配置一個，根據我實際的測試結果，不用手動加入這個也可以實現熱更新。我們公司的腳手架沒用這個結果，導致自己額外增添了很多配置。，走到這里，我們會發現只實現了第一步頁面自動刷新。很細，很有意思從零開始開發一個腳手架五 這一篇可能主要講的是熱更新，寫的很細，遇到很多有意思的地方，一一和大家講解下。 前沿：webpack-dev-server支持熱更新，簡單的說就是你修改...
摘要：弄清之后，就去腳手架源代碼里面找。這樣更加靈活，而且復用性高，起新項目，如果差別不大，幾乎可以做到零配置，這樣開發者壓根就不需要關心業務之外的東西從零開始開發一個腳手架三 上一篇已經初步整了個kkk-react，這一篇不寫代碼，粗略講解下create-react-app的部分源碼。 前沿：科普下看源碼的思路。以本人看過N多源碼的經驗總結，想要看這種腳手架或者npm包的源碼，第一步就是看...
摘要：第一步創建兩個項目這個是腳手架項目，腳手架說白點就是項目了，但要時時看效果，總不能一直到，所以需要。但因為是開發腳手架啊，這一步可以放到最后來弄，先把打包構建的步驟弄好。 前沿： 腳手架工具一大堆，但如果全部用第三方的腳手架，項目做起來肯定束手束腳，想來點差異化的東西都很難，所以最好是整一份自己的腳手架工具，想咋玩咋玩。閱讀了next腳手架和create-react-app腳手架源碼，...
摘要：前面兩篇文都只是鋪墊，今天至少要實現一個簡單的開始之前再說一下墊片和。我一開始以為會在引入，但并不是。這是我的，當然以后會拆出來，作為目錄下的一個執行文件。里面就配置了一個。下一篇從零開始開發一個腳手架四 前面兩篇文都只是鋪墊，今天至少要實現一個簡單react的hello word 開始之前再說一下墊片和presets。 前幾天突發疑問，create-react-app是怎么做的墊片，...
閱讀 3367·2021-11-04 16:10
閱讀 3870·2021-09-29 09:43
閱讀 2706·2021-09-24 10:24
閱讀 3362·2021-09-01 10:46
閱讀 2513·2019-08-30 15:54
閱讀 594·2019-08-30 13:19
閱讀 3241·2019-08-29 17:19
閱讀 1062·2019-08-29 16:40
