源碼目錄

├── scripts ------------------------------- 構(gòu)建相關(guān)的文件悔叽，一般情況下我們不需要?jiǎng)?│   ├── git-hooks ------------------------- 存放git鉤子的目錄
│   ├── alias.js -------------------------- 別名配置
│   ├── config.js ------------------------- 生成rollup配置的文件
│   ├── build.js -------------------------- 對 config.js 中所有的rollup配置進(jìn)行構(gòu)建
│   ├── ci.sh ----------------------------- 持續(xù)集成運(yùn)行的腳本
│   ├── release.sh ------------------------ 用于自動(dòng)發(fā)布新版本的腳本
├── dist ---------------------------------- 構(gòu)建后文件的輸出目錄
├── examples ------------------------------ 存放一些使用Vue開發(fā)的應(yīng)用案例
├── flow ---------------------------------- 類型聲明，使用開源項(xiàng)目 [Flow](https://flowtype.org/)
├── packages ------------------------------ 存放獨(dú)立發(fā)布的包的目錄
├── test ---------------------------------- 包含所有測試文件
├── src ----------------------------------- 這個(gè)是我們最應(yīng)該關(guān)注的目錄耕赘，包含了源碼
│   ├── compiler -------------------------- 編譯器代碼的存放目錄骄蝇，將 template 編譯為 render 函數(shù)
│   ├── core ------------------------------ 存放通用的，與平臺無關(guān)的代碼
│   │   ├── observer ---------------------- 響應(yīng)系統(tǒng)操骡，包含數(shù)據(jù)觀測的核心代碼
│   │   ├── vdom -------------------------- 包含虛擬DOM創(chuàng)建(creation)和打補(bǔ)丁(patching)的代碼
│   │   ├── instance ---------------------- 包含Vue構(gòu)造函數(shù)設(shè)計(jì)相關(guān)的代碼
│   │   ├── global-api -------------------- 包含給Vue構(gòu)造函數(shù)掛載全局方法(靜態(tài)方法)或?qū)傩缘拇a
│   │   ├── components -------------------- 包含抽象出來的通用組件
│   ├── server ---------------------------- 包含服務(wù)端渲染(server-side rendering)的相關(guān)代碼
│   ├── platforms ------------------------- 包含平臺特有的相關(guān)代碼九火，不同平臺的不同構(gòu)建的入口文件也在這里
│   │   ├── web --------------------------- web平臺
│   │   │   ├── entry-runtime.js ---------- 運(yùn)行時(shí)構(gòu)建的入口赚窃，不包含模板(template)到render函數(shù)的編譯器，所以不支持 `template` 選項(xiàng)岔激，我們使用vue默認(rèn)導(dǎo)出的就是這個(gè)運(yùn)行時(shí)的版本勒极。大家使用的時(shí)候要注意
│   │   │   ├── entry-runtime-with-compiler.js -- 獨(dú)立構(gòu)建版本的入口，它在 entry-runtime 的基礎(chǔ)上添加了模板(template)到render函數(shù)的編譯器
│   │   │   ├── entry-compiler.js --------- vue-template-compiler 包的入口文件
│   │   │   ├── entry-server-renderer.js -- vue-server-renderer 包的入口文件
│   │   │   ├── entry-server-basic-renderer.js -- 輸出 packages/vue-server-renderer/basic.js 文件
│   │   ├── weex -------------------------- 混合應(yīng)用
│   ├── sfc ------------------------------- 包含單文件組件(.vue文件)的解析邏輯虑鼎，用于vue-template-compiler包
│   ├── shared ---------------------------- 包含整個(gè)代碼庫通用的代碼
├── package.json -------------------------- 不解釋
├── yarn.lock ----------------------------- yarn 鎖定文件
├── .editorconfig ------------------------- 針對編輯器的編碼風(fēng)格配置文件
├── .flowconfig --------------------------- flow 的配置文件
├── .babelrc ------------------------------ babel 配置文件
├── .eslintrc ----------------------------- eslint 配置文件
├── .eslintignore ------------------------- eslint 忽略配置
├── .gitignore ---------------------------- git 忽略配置

對不同構(gòu)建版本的解釋

在 NPM 包的 dist/ 目錄你將會找到很多不同的 Vue.js 構(gòu)建版本辱匿。這里列出了它們之間的差別：

術(shù)語

• 完整版：同時(shí)包含編譯器和運(yùn)行時(shí)的版本。

• 編譯器：用來將模板字符串編譯成為 JavaScript 渲染函數(shù)的代碼炫彩。

• 運(yùn)行時(shí)：用來創(chuàng)建 Vue 實(shí)例匾七、渲染并處理虛擬 DOM 等的代碼〗ぃ基本上就是除去編譯器的其它一切昨忆。

• UMD：UMD 版本可以通過 <script> 標(biāo)簽直接用在瀏覽器中。jsDelivr CDN 的 https://cdn.jsdelivr.net/npm/vue 默認(rèn)文件就是運(yùn)行時(shí) + 編譯器的 UMD 版本 (vue.js)杉允。

• CommonJS：CommonJS 版本用來配合老的打包工具比如 Browserify 或 webpack 1邑贴。這些打包工具的默認(rèn)文件 (pkg.main) 是只包含運(yùn)行時(shí)的 CommonJS 版本 (vue.runtime.common.js)。

• ES Module：從 2.6 開始 Vue 會提供兩個(gè) ES Modules (ESM) 構(gòu)建文件：

  • 為打包工具提供的 ESM：為諸如 webpack 2 或 Rollup 提供的現(xiàn)代打包工具叔磷。ESM 格式被設(shè)計(jì)為可以被靜態(tài)分析拢驾，所以打包工具可以利用這一點(diǎn)來進(jìn)行“tree-shaking”并將用不到的代碼排除出最終的包。為這些打包工具提供的默認(rèn)文件 (pkg.module) 是只有運(yùn)行時(shí)的 ES Module 構(gòu)建 (vue.runtime.esm.js)改基。

  • 為瀏覽器提供的 ESM (2.6+)：用于在現(xiàn)代瀏覽器中通過 <script type="module"> 直接導(dǎo)入繁疤。

package.json

image.png

• main對應(yīng)的cjs模塊
• module對應(yīng)的是es模塊

{
  "scripts": {
    "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev",
    "dev:cjs": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-cjs",
    "dev:esm": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-esm",
    "dev:test": "karma start test/unit/karma.dev.config.js",
    "dev:ssr": "rollup -w -c scripts/config.js --environment TARGET:web-server-renderer",
    "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 TARGET:weex-factory",
    "dev:weex:compiler": "rollup -w -c scripts/config.js --environment TARGET:weex-compiler ",
    "build": "node scripts/build.js",
    "build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer",
    "build:weex": "npm run build -- weex",
    "commit": "git-cz"
  },
}

package.json的script字段，有不同版本的構(gòu)建命令寥裂。以"build": "node scripts/build.js"為入口嵌洼，找到構(gòu)建腳本build.js

找到vue構(gòu)造函數(shù)在/src/core/instance/index.js這個(gè)文件中

import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'

function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)
}

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue

實(shí)例一個(gè)vue對象是通過new操作符new Vue()完成的，構(gòu)造函數(shù)如果不是通過new操作符調(diào)用的話會給出警告??封恰。最后調(diào)用了內(nèi)置函數(shù)_init(options)麻养，這個(gè)函數(shù)在initMixin中定義

• initMixin(Vue)

export function initMixin (Vue: Class<Component>) {
  Vue.prototype._init = function (options?: Object) {
    ...
  }
}