1. 前言

vue版本：2.6.11

vue倉庫：https://github.com/vuejs/vue

vue檔案：https://cn.vuejs.org/

文章時間：2020-06-16

2. 開發模式

npm run dev，即運行package.json中的dev命令，其目的是把src/目錄下的相關檔案打成為dist/vue.js檔案，

2.1 決議dev命令

首先我們看看package.json中的dev命令：

"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev"

rollup：為一個模塊打包器，類似于webpack、parcel，相關檔案：http://www.rollupjs.com/

-w：--watch 表示監聽源檔案是否有改動，如果有改動，重新打包；

-c scripts/config.js：表示指定rollup的組態檔為scripts/config.js，

--environment TARGET:web-full-dev：表示在本次執行環境中 Node.js 內的 process.env.TARGET 的值，

2.2 scripts/config.js

scripts/config.js 為rollup的組態檔，通過process.env.TARGET('web-full-dev')，可在此檔案內找到相關配置資訊：

entry：rollup入口檔案，實際為 src/platforms/web/entry-runtime-with-compiler.js 檔案，

dest：打包后的輸出檔案，

format：指定打包后的模塊型別；這里為 umd 模塊，

2.3 entry-runtime-with-compiler.js 與 Flow

說明：npm dev命令的最終入口檔案地址為 src/platforms/web/entry-runtime-with-compiler.js，

打開檔案后，發現里面有些不是常見的JS代碼：

這些內容都是與Flow相關的特性，

那么什么是Flow？Flow是JavaScript的靜態型別檢查工具，目的在于檢查JavaScript中的型別錯誤，類似于TypeScript中的指定型別，

src目錄的js都采用了這種寫法，可運行 npm run flow 檢查是否含有型別錯誤，查看Flow相關知識可閱讀：用Flow撰寫更好的JavaScript代碼

3. src目錄結構

接下來我們看看src的目錄結構：

├── compiler 模板決議相關檔案
│   ├── codegen 根據AST生成render函式
│   ├── directives render函式生成之前需要處理的指令
│   └── parser 模板決議
├── core 核心代碼
│   ├── components 全域的組件；這里只有keep-alive(快取不活動的組件實體)
│   ├── global-api 全域方法；如Vue.use,Vue.extend,,Vue.mixin等
│   ├── instance 實體相關內容；包括實體方法，生命周期，事件等
│   ├── observer 雙向資料系結相關檔案
│   ├── util 工具方法
│   └── vdom 虛擬dom相關
├── platforms 平臺相關內容
│   ├── web web端
│       ├── compiler 編譯階段需要處理的指令和模塊
│       ├── runtime 運行階段需要處理的組件、指令和模塊
│       ├── server 服務端渲染相關
│       └── util 工具庫
│   └── weex weex端
├── server 服務端渲染相關
├── sfc 即Single File Components；對*.vue檔案進行決議
└── shared 共享的工具和列舉

可以看到vue分為了2個平臺：web和weex，在這里我們主要以web為目標，

本篇文章不會講解Vue源代碼，后續會以雙向系結、指令、組件等角度來閱讀原始碼，

End Web開發之路系列文章選單加載中...

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/62330.html

標籤：JavaScript

上一篇：vue專案中關閉eslint