從零開始開發一個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來完成咱們本來須要考命令行或者配置文件來作的事情。這樣更加靈活，並且複用性高，起新項目，若是差異不大，幾乎能夠作到零配置，這樣開發者壓根就不須要關心業務以外的東西

從零開始開發一個react腳手架(三)