Vue源碼探究-源碼文件組織

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項目的組織有了更深刻的瞭解，爲繼續解讀具體功能的實現排除了無關影響因素，掃清了路障。若有問題歡迎你們指正。