資訊專欄INFORMATION COLUMN
摘要：前面兩篇文都只是鋪墊，今天至少要實現一個簡單的開始之前再說一下墊片和。我一開始以為會在引入，但并不是。這是我的，當然以后會拆出來，作為目錄下的一個執行文件。里面就配置了一個。下一篇從零開始開發一個腳手架四
前面兩篇文都只是鋪墊，今天至少要實現一個簡單react的hello word
開始之前再說一下墊片和presets。 前幾天突發疑問，create-react-app是怎么做的墊片，因為很多語法或者API不一定兼容所有瀏覽器，所以需要有墊片(polyfill)去幫我們做兼容。我一開始以為會在entry引入@babel/polyfill，但并不是。而是引入了一個babel-preset-react-app。
如果有自己寫webpack配置的經驗，應該明白我們配置babel的時候，引入了許多的preset和一些plugins，比如@babel/preset-env,@babel/preset-react, @babel/plugin-proposal-object-rest-spread(支持對象展開符) @babel/plugin-syntax-dynamic-import（支持異步import語法）等等，還有很多。但是這個presets集合了很多很多preset，這樣我們就沒必要分別引入了。
可以看到這個preset里面還有 @babel/runtime 這個就是墊片庫了，結合這個 @babel/plugin-transform-runtime可以做到按需加載墊片庫，具體和@babel/polyfill的差別就不說了，自己去查詢文章。
參考create-react-app，我簡化了他的N多目錄和結構，去掉了很多的兼容拓展。當然先只是簡單實現了一個類似于npm run start。
這是我的index.js，當然以后會拆出來，作為bin目錄下的一個執行文件。
cli-view
當執行 node ./src/cs.js,就會進行打包構建了。
會自動打開默認瀏覽器
簡單說下三個文件webpackConfig，devServerConfig，config。
當然了應為還只是最初版本，很多細節功能壓根沒有。
先說下config.js
這個就是單純的cache一些環境配置，當然我仍然依賴了一下webpack.config.js，其實這個是純粹一個暴露在項目中的配置文件，它也可以叫其他名字例如app.config.js之類的。
里面就配置了一個entry。create-react-app貌似默認去的就是src下的index.jsx，其實我們也可以這樣玩，但我覺得暴露個entry的入口配置，靈活性更高點。畢竟我們還可以玩多頁面。至于到底怎么整，大家可以自己取舍。
createWebpack.js里面就是我們平常看到的配置文件了。
這里有幾個細節要提一下，1 比如寫配置loader的時候，我一開始直接babel-loader，報錯找不到babel-loader,我估摸著是它的邏輯是走到了項目目錄下去找了，而我的項目目錄沒有安裝這個，所以我按照create-react-app的來，加上了require.resove，估計走的就是腳手架的node_modules去找babel-loader，就沒報錯了。 2 babel的presets我也直接用的是babel-preset-react-app（其實就是幾個preset的集合）3 寫腳手架的時候稍微注意下目錄，別搞混了，比如process.cwd()，__dirname之類的。
createDevServer就最簡單了，就是一個簡單的serve配置了。但后續應該還要加上代理之類的。因為現在自己手上的項目都是引入了node，用不到webpack-dev-server。我估計用這個調用后臺接口的時候，要么自己起nginx項目做轉發，不然就在這里設置proxy。不然跨域。
雖然看起來簡單，但真正自己敲著代碼來，還是會發現好多細節問題。因為功能還非常不完整，比如css,熱加載都還沒有就暫時不放到git上了。但下一期完善功能就放上去。
下一篇 從零開始開發一個react腳手架（四）
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103292.html
摘要：弄清之后，就去腳手架源代碼里面找。這樣更加靈活，而且復用性高，起新項目，如果差別不大，幾乎可以做到零配置，這樣開發者壓根就不需要關心業務之外的東西從零開始開發一個腳手架三 上一篇已經初步整了個kkk-react，這一篇不寫代碼，粗略講解下create-react-app的部分源碼。 前沿：科普下看源碼的思路。以本人看過N多源碼的經驗總結，想要看這種腳手架或者npm包的源碼，第一步就是看...
摘要：關于和，其實單純問兩者的區別，大家都知道，一個是開發依賴，一個是線上依賴。因為一開始的開發不規范，導致我隨意亂裝。。一個包可以再大點。腳手架已經實現了三分之一，現在是直接來作為腳手架，到最后效果應該是的形式，不過命令內容已經實現和。 前言：最近天天加班做新項目，Taro版的小程序，還要實現富文本加海報，踩了不少坑，下次專門開個坑說一下。 回到腳手架，說實話從頭寫一個，即便是參考crea...
摘要：第一步創建兩個項目這個是腳手架項目，腳手架說白點就是項目了，但要時時看效果，總不能一直到，所以需要。但因為是開發腳手架啊，這一步可以放到最后來弄，先把打包構建的步驟弄好。 前沿： 腳手架工具一大堆，但如果全部用第三方的腳手架，項目做起來肯定束手束腳，想來點差異化的東西都很難，所以最好是整一份自己的腳手架工具，想咋玩咋玩。閱讀了next腳手架和create-react-app腳手架源碼，...
摘要：根據配置經驗，還需要配置一個，根據我實際的測試結果，不用手動加入這個也可以實現熱更新。我們公司的腳手架沒用這個結果，導致自己額外增添了很多配置。，走到這里，我們會發現只實現了第一步頁面自動刷新。很細，很有意思從零開始開發一個腳手架五 這一篇可能主要講的是熱更新，寫的很細，遇到很多有意思的地方，一一和大家講解下。 前沿：webpack-dev-server支持熱更新，簡單的說就是你修改...
摘要：通過文件可以對圖標名稱等信息進行配置。注意，注冊的只在生產環境中生效，并且該功能只有在下才能有效果該文件是過濾文件配置該文件是描述文件定義了項目所需要的各種模塊，以及項目的配置信息比如名稱版本許可證等元數據。 一、 快速開始： 全局安裝腳手架： $ npm install -g create-react-app 通過腳手架搭建項目： $ create-react-app 開始項目： ...
閱讀 2809·2021-10-26 09:48
閱讀 1671·2021-09-22 15:22
閱讀 4028·2021-09-22 15:05
閱讀 608·2021-09-06 15:02
閱讀 2607·2019-08-30 15:52
閱讀 2107·2019-08-29 18:38
閱讀 2755·2019-08-28 18:05
閱讀 2332·2019-08-26 13:55
