閱讀前端項目源碼的正確姿式

這篇文章主要介紹下筆者看源碼的一些心得和方式，因爲筆者看的大部分是前端項目，固然也看過一些其它領域的源碼，不過很少，因此內容主要仍是之前端項目爲主

瞭解和熟悉

1. 在準備看一個開源項目源碼的時候先去熟悉下這個項目的背景、功能以及相應的API。這步爲了理解整個項目的功能作準備，也是爲了後面重點看哪些模塊作準備
2. 查看項目的README.md文件。有些項目會在將設計文檔和架構圖放到md文件上，這樣會讓你宏觀上對一些概念有些認識。例如immer
3. 查看項目總體的文件結構。好比下面提到一些重點須要查看的文件
   • package.json，能夠從這個文件看到整個項目的入口文件、開發/測試/發佈編譯的各類命令，也能夠了解到項目的依賴庫、工具以及框架等等。
   • webpack/gulp/rollup配置文件，從這個文件裏面能夠看到項目總體的工具配置，也包含入口文件以及編譯以後的代碼文件，以及一些配置項的功能
4. 知道一些默認命名的文件規則，好比
   • 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下來，單獨準備好一份筆記，慢慢去研究、記錄看源碼過程當中的一些心得，到最後看完再回過頭來你能說出它的架構和設計，那麼我以爲這個學習是有意義，因此我認爲閱讀源碼的終究目標是瞭解項目，最終能實現它