Vue原始碼探究-原始碼檔案組織

原始碼探究基於最新開發分支，當前釋出版本為v2.5.17-beta.0

Vue 2.0版本的大整改不僅在於使用功能上的優化和調整，整個程式碼庫也發生了天翻地覆的重組。可見隨著使用者的增加與聲名傳播，Vue自身的格局發生了很大的突破，特別體現在對Weex框架做了內部支援。不管在未來是使用Weex或者與NativeScript結合做跨平臺應用開發，都還是能與React、Angular保持三足鼎立的勢頭。

Vue的github倉庫根目錄

先來大致瞭解一下整個專案的結構（摘譯自官方說明文件）：

• scripts：包含構建相關的指令碼和配置檔案。作者宣告一般開發不需要關注此目錄
• dist：構建出的不同分發版本，只有釋出新版本時才會跟新，開發分支的新特性不會反映在此
• flow：包含使用Flow（靜態型別檢查工具）宣告的型別，供全域性使用
• packages：包含服務端渲染和模板編譯器兩種不同的NPM包，是提供給不同使用場景使用的
• test：包含所有測試程式碼
• src：Vue的原始碼，使用ES6和Flow型別註釋編寫的
• types：使用TypeScript定義的型別宣告，並且包含了測試檔案，不太明白為什麼要同時使用兩種靜態型別檢查語言

以下是官方文件未列出說明的資料夾，好奇寶寶抱著刨根問底的決心一併在此列出：

• .github：專案相關的說明文件，上面的說明文件就在此資料夾
• examples：一些示例
• .circleci：包含CircleCI部署工具的配置檔案
• benchmark： Benchmark效能測試相關檔案

根目錄下的其他配置檔案相信大家都心知肚明有什麼作用，不在此贅述了。

基於以上的大致瞭解，發現除 flow 和 src 目錄外，其他的資料夾主要都是用來服務於Vue專案組織和構建的，在原始碼探究的旅途中可以將他們剔除。由於 flow 資料夾裡包含了一些預先定義好的靜態型別，是與原始碼編寫相關的，還是需要瀏覽一下。接下來，繼續詳細的探索一下 src 原始碼資料夾的組織結構。

Vue的src原始碼目錄

Vue最新版本的原始碼資料夾下分為6個目錄compiler、core、server、platforms、sfc、shared。作者在CONTRIBUTING.md也說明了它們的內容，但在其文件中types資料夾已經被移出到根目錄下了，這裡沒有修改。

Compiler 編譯器

包含模板到渲染函式編譯器的程式碼。

拆分原因：1.0版本中就把編譯器的功能存放在獨立資料夾中，2.0之後的版本進行了調整和優化，可以更好地組織編譯器相關功能的程式碼。

編譯器由解析器、優化器、程式碼生成器組成，另外還有生成編譯器、指令相關等一些程式碼。

編譯器的主要構成部分：

• parser：解析器的作用是將模板轉換成元素AST物件。
• optimizer：優化器負責檢測靜態抽象樹的渲染進行優化。
• codegen：程式碼生成器直接從AST物件生成程式碼字串。

編譯器具體的實現功能在另一篇文章模板編譯的實現中進行探討。

Core 核心

組織與平臺無關的通用執行時程式碼，即與平臺解耦，在任何支援Javascript執行的環境下都可以執行。

拆分原因：隨著2.0版本區別出了web和weex跨平臺兩端的開發支援，在不同平臺下的編譯和執行時都有區別，所以將核心通用的程式碼提取到獨立資料夾中組織，並且不包含那些將要根據不同平臺調整的相關程式碼，如編譯器。

核心程式碼包括2.0版本中最基礎的程式碼部分：

• Observer：觀察者系統，實現監測資料變化的功能。
• Vdom：Vue虛擬節點樹，實現虛擬節點的建立和重新整理功能。
• instance：Vue類，包含建構函式和原型方法的建立。
• Global-API：全域性API。
• Components：通用抽象元件。
• util：輔助函式。

Platforms 平臺

平臺專有程式碼存放在這個目錄中，以不同的平臺組成子目錄。

拆分原因：2.0版本後在內部支援與Weex框架的融合，與web端的應用開發相區分。

目前分離了出了兩個部分：web端開發和weex框架所涉及跨平臺開發，分別包含了一些編譯器和執行時的不同程式碼。

Server 伺服器渲染

包含服務端渲染的相關程式碼。

拆分原因：2.0版本後開發了支援服務端渲染的新功能

Sfc 單檔案元件檔案編譯

這一資料夾目前只包含了一個叫parser.js的檔案，用來將單檔案元件解析為SFC描述物件，輸出給編譯器繼而執行模板編譯。

拆分原因：單獨抽離解析vue單檔案元件的邏輯

Shared 共享常量和函式

Shared是2.0版本之後增加的用來組織共享變數和輔助函式的資料夾，主要從之前的輔助函式檔案裡抽取出來，在後來的開發中也繼續新增了其他函式和常量，從其中包含的constants.js和util.js兩個檔案的名稱中也能顯而易見此資料夾的作用。

拆分原因：更好的組織程式碼

---

關於為何要花心思來分析一個專案的檔案組織方式和目錄結構，並不是因為我有著一套成熟的學習專案原始碼的方式，而是因為我覺得可能會有一些人與我一樣，無法任由那些不懂的東西殘留在視線範圍內，所以到此為止，帶著各種問題探索完了Vue倉庫的檔案組織，感覺自己對於整個Vue專案的組織有了更深入的瞭解，為繼續解讀具體功能的實現排除了無關影響因素，掃清了路障。如有問題歡迎大家指正。