這篇文章主要介紹下筆者看原始碼的一些心得和方式，由於筆者看的大部分是前端專案，當然也看過一些其它領域的原始碼，不過不多，所以內容主要還是以前端專案為主
瞭解和熟悉
- 在準備看一個開源專案原始碼的時候先去熟悉下這個專案的背景、功能以及相應的API。這步為了理解整個專案的功能做準備，也是為了後面重點看哪些模組做準備
- 檢視專案的README.md檔案。有些專案會在將設計文件和架構圖放到md檔案上，這樣會讓你巨集觀上對一些概念有些認識。例如immer
- 檢視專案整體的檔案結構。比如下面提到一些重點需要檢視的檔案
- package.json，可以從這個檔案看到整個專案的入口檔案、開發/測試/釋出編譯的各種命令，也可以瞭解到專案的依賴庫、工具以及框架等等。
- webpack/gulp/rollup配置檔案，從這個檔案裡面可以看到專案整體的工具配置，也包含入口檔案以及編譯之後的程式碼檔案，以及一些配置項的功能
- 知道一些預設命名的檔案規則，比如
- dist，表示編譯之後的原始檔
- src，原始碼檔案
- index.xx，一般會用來作為前端的入口檔案
- app.xx、server.xx，一般會用來做後端的入口檔案
- static，靜態檔案，前端專案一般都會用來作為給瀏覽器執行的入口檔案
- test，測試用例資料夾
- e2e，端對端測試
- unit，單元測試
- ... 這期間哪怕你遇到一些檔案你不知道有什麼用，有2個方式可以瞭解到
- 直接用google搜該檔名，往往能找到相關答案，比如**.eslintrc.js**
- 進去看檔案內容，一般會有註釋，如果都沒有的話說明這個檔案往往不是很重要，可以先忽略
上手
做完前面的準備工作後，這時候你應該對這個專案有一個大致的瞭解，這裡你可以先簡單寫寫你對這個專案的一些疑惑，請注意！！！這裡的問題很重要，因為看原始碼必須要帶著問題去看，不然你會摸不到方向。至於這裡的問題，你可以先列個清單，比如mpvue
- 小程式是不支援npm引入庫檔案的，但是mpvue支援，是怎麼做到的呢？
- 小程式和vue都有自己的生命週期，框架是怎麼去相容？
- mpvue是怎麼樣讓小程式支援單檔案元件(.vue) .....
接著我可以開始正式的看原始碼了，這裡容我說句題外話。有人可能喜歡先從第一個commit看起，因為第一個commit的原始碼會比較簡單易懂，但是我並不喜歡這樣，因為第一個commit的程式碼往往跟現有的文件差距比較大（除非這個專案比較新），無法瞭解到整體的結構，而且第一個commit的程式碼可能跟最新的程式碼在架構上面有著翻天覆地的變化，反而做了一些無用功。
1.入口檔案，幾乎所有的專案都會有一個入口檔案，其實你做上面的準備工作之後，基本你都能找到入口檔案，無非就是從2個方面入手
- package.json，因為是入口檔案，一般都會使用預設命名，比如index.xx app.xx之類。
- 工具的配置檔案，比如webpack的entry欄位，gulp.src執行的檔案路徑等等
2.以模組為單元開始閱讀，帶著你上面準備的問題，抽絲剝繭、層層深入。這裡分享一個小技巧，可以先Fork下一個專案，在閱讀的過程中不斷加上自己的註釋和理解，一個好的專案往往在結構上面都是很清晰，例如
好的原始碼是可以從命名上面都能直接給讀者一些資訊，方便閱讀。
3.當你深入讀到某一塊原始碼不理解，先試著在網上找找有沒有相關的資料學習下，實在找不到可以先標記下放著，等你看到後面再回過頭來看不理解的地方或者會茅塞頓開。
技巧
1.在你閱讀的過程中，如果發現一些程式碼片段很精妙的可以記錄一下，或者嘗試下有沒有更好的方式去實現，也許你就成了這個專案contributors了
2.當你不瞭解某個模組的作用時，你可以去看看測試用例，特別是單元測試(unit)，測試用例包含對輸入輸出的校驗，從這裡可以快速瞭解到模組相關的作用
3.要學會給專案打斷點，在邊讀邊執行專案原始碼的過程中，通過斷點輸出當前執行的堆疊資訊對你理解專案也是有很大的幫助
建議
初學者在github上面閱讀原始碼的時候可以先從一些小的專案入手，比如實現了某個功能或者元件這樣的專案，先不要看一些大而全的框架，比較容易上手，當你積累了一定的經驗後再嘗試下看框架的原始碼。 另外搭配一些工具來閱讀或者會更好，筆者推薦一些工具給大家
- Octotree，瀏覽器擴充套件，在github上面顯示程式碼樹，對你瞭解整個專案結構有著非常大的幫助
- webstorm，這個看個人喜好吧，筆者比較喜歡WS，主要是裡面的工具比較全面，比如支援typescript、babel等等一些前端經常用到的工具
- SourceTree，git視覺化客戶端工具，如果你喜歡從第一個commit開始看，那麼這個工具對你比較有幫助，看看快速瞭解到每個版本提交的內容以及原始碼變更記錄，筆者以前比較喜歡用這個，但是後面WS有自帶的視覺化工具之後就沒用過了。
總結
學習專案原始碼不是一蹴而就，往往週期比較長，最好的就是能夠將專案Fork下來，單獨準備好一份筆記，慢慢去研究、記錄看原始碼過程中的一些心得，到最後看完再回過頭來你能說出它的架構和設計，那麼我覺得這個學習是有意義，所以我認為閱讀原始碼的終究目標是瞭解專案，最終能實現它