從零開始開發一個react腳手架(二)
上一篇已經初步整了個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來完成我們原本需要考命令列或者配置檔案來做的事情。這樣更加靈活，而且複用性高，起新專案，如果差別不大，幾乎可以做到零配置，這樣開發者壓根就不需要關心業務之外的東西
下一篇就開始真正寫我們的自己的腳手架了。