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

前面兩篇文都只是鋪墊，今天至少要實現一個簡單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腳手架（四）