資訊專欄INFORMATION COLUMN
摘要：弄清之后，就去腳手架源代碼里面找。這樣更加靈活，而且復用性高，起新項目，如果差別不大，幾乎可以做到零配置，這樣開發者壓根就不需要關心業務之外的東西從零開始開發一個腳手架三
上一篇已經初步整了個kkk-react，這一篇不寫代碼，粗略講解下create-react-app的部分源碼。
前沿：科普下看源碼的思路。以本人看過N多源碼的經驗總結，想要看這種腳手架或者npm包的源碼，第一步就是看package.json的配置，一般看的就是main.js和script。main.js就是引入npm包后，取的真實的js文件地址。script就是腳手架命令，類似下面create-react-app
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
腳手架看script,npm包看main。
找到script之后，就4個命令，第一個start就是開啟本地服務，build就是打包文件，test沒仔細看我估計就是代碼檢查吧，因為我們公司的test就是eslint檢查，eject類似于生成配置文件之類的，因為他的配置走的是api,不是webpack配置文件，這個命令可能就是生成出對應的webpack文件（后面的兩個沒細看，不必太care）。
弄清script之后，就去腳手架源代碼里面找package.json。去這個文件里面看bin配置，說直接一點，為嘛script里面的命令能其效果呢，就是你安裝一個包之后，如果這個包里面有bin配置，那么npm就會去node_modules里面的.bin目錄下生成出對應的執行命令文件
作為一個腳手架工具其實是可以分為兩部分的。
一是生成對應的dir和file，搭建好環境，讓我們能直接跑起項目。 這一部分比較簡單，我們到最后再來完成這一步（等我們完成自己的腳手架工具之后），類似create-create-app myApp之類的。
二我感覺才是關鍵，是各種命令的實現，npm run start之類，接下來我會簡單的解讀下這一步的源碼。
create-react-app用的是分包管理lerna,這里就不講了。直接找到react-scripts目錄里面的package.json，
可以看到雖然script里面有4條命令，但其實就是一個react-scripts命令，后面的只是參數。
所有運行的react-scripts start|test|build，其實都是在執行react-scripts.js。
看源碼其實解析process.arg，然后解析出參數，最后執行對應的scripts目錄下的文件，我們執行的是start，就是start.js文件。
接下來就是解析這個start.js源碼了。
這里面有很多參數判定，代理處理，各種細節處理，拋開這些，核心其實就兩個函數
一 createCompiler,這個就是簡單點就是 new webpack(config)的實例。因為平常我們寫的大部分都是配置文件，實際是執行webpack打包的時候，他也就是讀取配置文件，然后new webpack(config)。
二 第二個就更簡單了。讀取各種配置參數，起一個服務，WebpackDevServer。
平常我們都是通過命令行起一個服務，然后配置webpack.config.js里面的devServer，而現在就是通過API來實現。
雖然沒有講的很細，但是明顯可以發現，腳手架說白一點就是通過各種api來完成我們原本需要考命令行或者配置文件來做的事情。這樣更加靈活，而且復用性高，起新項目，如果差別不大，幾乎可以做到零配置，這樣開發者壓根就不需要關心業務之外的東西
從零開始開發一個react腳手架(三)
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109256.html
摘要：關于和，其實單純問兩者的區別，大家都知道，一個是開發依賴，一個是線上依賴。因為一開始的開發不規范，導致我隨意亂裝。。一個包可以再大點。腳手架已經實現了三分之一，現在是直接來作為腳手架，到最后效果應該是的形式，不過命令內容已經實現和。 前言：最近天天加班做新項目，Taro版的小程序，還要實現富文本加海報，踩了不少坑，下次專門開個坑說一下。 回到腳手架，說實話從頭寫一個，即便是參考crea...
摘要：第一步創建兩個項目這個是腳手架項目，腳手架說白點就是項目了，但要時時看效果，總不能一直到，所以需要。但因為是開發腳手架啊，這一步可以放到最后來弄，先把打包構建的步驟弄好。 前沿： 腳手架工具一大堆，但如果全部用第三方的腳手架，項目做起來肯定束手束腳，想來點差異化的東西都很難，所以最好是整一份自己的腳手架工具，想咋玩咋玩。閱讀了next腳手架和create-react-app腳手架源碼，...
摘要：前面兩篇文都只是鋪墊，今天至少要實現一個簡單的開始之前再說一下墊片和。我一開始以為會在引入，但并不是。這是我的，當然以后會拆出來，作為目錄下的一個執行文件。里面就配置了一個。下一篇從零開始開發一個腳手架四 前面兩篇文都只是鋪墊，今天至少要實現一個簡單react的hello word 開始之前再說一下墊片和presets。 前幾天突發疑問，create-react-app是怎么做的墊片，...
摘要：根據配置經驗，還需要配置一個，根據我實際的測試結果，不用手動加入這個也可以實現熱更新。我們公司的腳手架沒用這個結果，導致自己額外增添了很多配置。，走到這里，我們會發現只實現了第一步頁面自動刷新。很細，很有意思從零開始開發一個腳手架五 這一篇可能主要講的是熱更新，寫的很細，遇到很多有意思的地方，一一和大家講解下。 前沿：webpack-dev-server支持熱更新，簡單的說就是你修改...
摘要：通過文件可以對圖標名稱等信息進行配置。注意，注冊的只在生產環境中生效，并且該功能只有在下才能有效果該文件是過濾文件配置該文件是描述文件定義了項目所需要的各種模塊，以及項目的配置信息比如名稱版本許可證等元數據。 一、 快速開始： 全局安裝腳手架： $ npm install -g create-react-app 通過腳手架搭建項目： $ create-react-app 開始項目： ...
閱讀 2689·2021-10-12 10:12
閱讀 2334·2021-09-02 15:41
閱讀 2560·2019-08-30 15:55
閱讀 1399·2019-08-30 13:05
閱讀 2430·2019-08-29 11:21
閱讀 3534·2019-08-28 17:53
閱讀 3022·2019-08-26 13:39
閱讀 800·2019-08-26 11:50
