Vue源碼學習一 ———— Vue項目目錄

Vue 目錄結構

能夠在 github 上經過這款 Chrome 插件 octotree 查看Vue的文件目錄。也能夠克隆到本地。。

Vue 是如何規劃目錄的

• scripts ------------- 構建相關文件
  • git-hooks.js ----- 存放 git 鉤子
  • alias.js ----- 別名配置文件
    
  • config.js ------ 生成 rollup 配置
  • build.js ----- 對上面config.js中全部的 rollup配置進行構建
  • replease.sh ----- 自動發佈新版本的腳本
• dist ------------- 構建後文件的輸出目錄
• examples ------------- Vue中的一些例子 demo
• flow ------------- JS中的類型聲明,和typeScript差很少,提供強類型
  
• packages ------------- 存放獨立發佈的包的目錄
  
• test ------------- 全部測試文件
  
• src ------------- 包含了源碼目錄
  • compiler -----編譯器代碼存放的目錄, 將 template 變異成 render函數
  • core ----- 存放通用的代碼
    • observer ----- 存放響應系統, 包含數據觀測的核心代碼
    • vdmo ----- 包含虛擬DOM建立和打補丁
    • instance ----- Vue構造函數設計相關代碼
    • global-api ----- Vue構造函數添加全局靜態方法和屬性的代碼
      
    • components ----- 抽象出來的通用組件, 如 keep-alive
  • server ----- 包含服務器渲染
  • platforms ----- 包含平臺特有的相關代碼
    • web ----- web平臺
    • weex ----- 混合應用
  • sfc ----- 包含單文件組件
  • shared ----- 通用的輔助代碼
• yarn.lock ------------- yarn 鎖定文件
• editorconfig ------------- 針對編輯器編碼風格的配置文件
• .flowconfig ------------- flow 配置文件
• .babelrc ------------- babel 配置文件
• .eslintrc ------------- eslint 配置文件
• .eslintignore ------------- eslint 忽略配置
• .gitignore ------------- git 忽略配置

Vue的構建配置和輸出

Vue有三種不一樣的構建輸出, 是 UMD 、 CommenJS 、ES modules。在 scripts/config.js的37行 builds對象中能看到。

配置的入口文件 entry都是 web/entry-runtime.js, 可是輸出的格式 format分別是 cjs 、 es 和 umd。

每一個模塊的形式還分爲: 運行時版 和 完整版。

運行時版本: web/entry-runtime.js
完整版: web/entry-runtime-with-compiler.js

主要差異是完整版比運行時版多了個 with-compiler.js, 這個使用用來將template編譯成render函數的。

爲何要分爲運行時版和完整版?

完整版 = 運行版 + Compiler。完整版就比運行時版多了個從 template編譯成 render函數的過程。 將字符串模塊編譯成render函數不必定是要等到代碼運行的時候去作,能夠在構建的時候就完成這一步。因此運行時版結合構建工具搭配更好,能夠減小庫的說起,提高性能,還剋以將Compiler抽離成單獨的包。

那完整版是不須要配合構建工具使用的。。

除了運行版和完整版,爲啥還分這麼多不一樣的包?

cjs、es、umd

直接經過 script 標籤直接引入的包是 umd的, 可是寫 Vue 大多數是配合構建工具 webpack等使用的。cjs是用於 webpack 1的, 而es是適用於 webpack 2+、rollup等的。webpack 2+能夠直接加載 ES Modules，因此適用於es的包。

Vue package.json文件

scripts下的配置

{
  "scripts": {
    // 構建 完整版 umd 模塊的vue
    "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev",
    
    // 構建 `運行時` `cjs` 模塊的vue
    "dev:cjs": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-cjs",
    
    // 構建 `運行時` `es` 模塊的vue
    "dev:esm": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-esm",
    "dev:test": "karma start test/unit/karma.dev.config.js",
    
    // 構建 vue-server-renderer 包
    "dev:ssr": "rollup -w -c scripts/config.js --environment TARGET:web-server-renderer",
    
    // 構建 Compiler
    "dev:compiler": "rollup -w -c scripts/config.js --environment TARGET:web-compiler ",
    "dev:weex": "rollup -w -c scripts/config.js --environment TARGET:weex-framework",
    "dev:weex:factory": "rollup -w -c scripts/config.js --environment
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }
}