Flow
vue框架使用了Flow作為類型檢查鳞上，來保證項(xiàng)目的可讀性和維護(hù)性皂林。vue.js的主目錄下有Flow的配置.flowconfig文件，還有flow目錄，指定了各種自定義類型穷娱。
在學(xué)習(xí)源碼前可以先看下Flow的語法 官方文檔
目錄結(jié)構(gòu)
vue.js源碼主要在src下
src
├── compiler # 編譯相關(guān)
├── core # 核心代碼
├── platforms # 不同平臺的支持
├── server # 服務(wù)端渲染
├── sfc # .vue 文件解析
├── shared # 共享代碼
compiler
template的編譯
core
core
├── components # 內(nèi)置組件
├── global-api # 全局 API 封裝
├── instance # Vue 實(shí)例化，生命周期
├── observer # 觀察者运沦，響應(yīng)式
├── util # 工具函數(shù)
├── vdom # virtual DOM
platform
存放2個(gè)主要入口泵额，分別打包運(yùn)行在web和weex上的vue.js
server
支持了服務(wù)端渲染
sfc
把.vue文件內(nèi)容解析成js對象
shared
存放共享方法
vue.js構(gòu)建
vue是基于Rollup構(gòu)建的，類似于webpack
首先來看下package.json文件,先看下script字段：
{
"script":{
"build": "node scripts/build.js",
"build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer",
"build:weex": "npm run build -- weex",
}
}
這3條都是構(gòu)建vue的命令携添，后2條是根據(jù)需求添加對應(yīng)環(huán)境參數(shù)嫁盲。運(yùn)行npm run build時(shí)會執(zhí)行node scripts/build.js
構(gòu)建過程
構(gòu)建過程比較復(fù)雜，這里會簡化下構(gòu)建過程烈掠，只分析主線流程
進(jìn)入到scripts/build.js,
// 從配置文件讀取配置羞秤，拿到所有構(gòu)建的path
let builds = require('./config').getAllBuilds()
// 過濾builds
build(builds)
再看下配置文件scripts.config.js,
let builds= {
'web-runtime-esm': {
entry: resolve('web/entry-runtime.js'),
dest: resolve('dist/vue.runtime.esm.js'),
format: 'es',
banner
},
}
entry 屬性表示構(gòu)建的入口 JS 文件地址缸托，dest 屬性表示構(gòu)建后的 JS 文件地址。format 屬性表示構(gòu)建的格式瘾蛋，cjs 表示構(gòu)建出來的文件遵循 CommonJS 規(guī)范俐镐，es 表示構(gòu)建出來的文件遵循ES Module 規(guī)范。umd表示構(gòu)建出來的文件遵循 UMD 規(guī)范哺哼。
resolve
看下 resovle 方法的定義
const resolve = p => {
const base = p.split('/')[0]
if (aliases[base]) {
return path.resolve(aliases[base], p.slice(base.length + 1))
} else {
return path.resolve(__dirname, '../', p)
}
}
用到了 path.resolve([... paths]), path.resolve 是 node.js 提供的路徑解析方法,可以看下官方文檔了解下佩抹，主要是從右到左處理給定的路徑序列,直到構(gòu)造出絕對路徑.
用resolve('web/entry-runtime.js')作分析， base 是 web , 找到 aliases[base] 即真實(shí)路徑 '../src/platforms/web' ,
entry: resolve('web/entry-runtime.js')
所以最終入口路徑是 ../src/platforms/web/entry-runtime.js取董，構(gòu)建生成文件路徑是../dist/vue.runtime.esm.js
genConfig()
輸入builds前要先將builds轉(zhuǎn)換成rollup打包所對應(yīng)的配置結(jié)構(gòu)
if (process.env.TARGET) {
module.exports = genConfig(process.env.TARGET)
} else {
exports.getBuild = genConfig
// 返回config組成的數(shù)組
exports.getAllBuilds = () => Object.keys(builds).map(genConfig)
}
