??首先粘茄，如果要閱讀類似Vue這種工具庫或者框架庫的代碼乏梁，最好先去看一下package.json的scripts部分缰冤。這里能看到代碼打包入口，實(shí)際上也就是我們分析代碼的入口扯饶，我們具體看一下build命令即可恒削，vue的script的build命令如下：
{
"name": "vue",
"version": "2.6.14",
/* ... */
"scripts": {
/* ... */
"build": "node scripts/build.js",
"build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer",
"build:weex": "npm run build -- weex",
/* ... */
},
/* ... */
}
??OK，我們找一下build命令尾序，可以看到build的入口是scripts/build.js钓丰，然后進(jìn)入這個文件可以看到這樣一行代碼let builds = require('./config').getAllBuilds()，這個./config文件保存了開發(fā)和生產(chǎn)環(huán)境的entry和output文件每币，我們進(jìn)去找到web的browser prod下的打包文件入口和產(chǎn)出即可携丁，配置如下：
// Runtime+compiler ES modules build (for direct import in browser)
const builds = {
// ....
// runtime-only production build (Browser)
'web-runtime-prod': {
entry: resolve('web/entry-runtime.js'),
dest: resolve('dist/vue.runtime.min.js'),
format: 'umd',
env: 'production',
banner
},
// ....
// Runtime+compiler production build (Browser)
'web-full-prod': {
entry: resolve('web/entry-runtime-with-compiler.js'),
dest: resolve('dist/vue.min.js'),
format: 'umd',
env: 'production',
alias: { he: './entity-decoder' },
banner
},
// ...
}
??注意runtime-prod和full-prod的區(qū)別，runtime-prod表示沒有template編譯器兰怠，而full-prod表示有则北。如果你使用webpack + vue-loader那么可以考慮直接使用runtime-prod，如果是考慮直接在index.html中隨意編寫一個Vue應(yīng)用痕慢，那么使用full-prod尚揣。
??本文重點(diǎn)分析full-prod。所以直接看full-prod的入口掖举，是web/entry-runtime-with-compiler.js快骗。，不過發(fā)現(xiàn)源碼里面并沒有這個文件塔次，然后注意到scripts/config.js這一段代碼：
const aliases = require('./alias')
const resolve = p => {
const base = p.split('/')[0]
if (aliases[base]) { // 如果發(fā)現(xiàn)有alias方篮，那么替換alias為對應(yīng)的實(shí)際路徑
return path.resolve(aliases[base], p.slice(base.length + 1))
} else {
return path.resolve(__dirname, '../', p)
}
}
接著看alias的代碼：
const path = require('path')
const resolve = p => path.resolve(__dirname, '../', p)
module.exports = {
vue: resolve('src/platforms/web/entry-runtime-with-compiler'),
compiler: resolve('src/compiler'),
core: resolve('src/core'),
shared: resolve('src/shared'),
web: resolve('src/platforms/web'), // 這一行
weex: resolve('src/platforms/weex'),
server: resolve('src/server'),
sfc: resolve('src/sfc')
}
可以找到web/entry-runtime-with-compiler.js實(shí)際上就是src/platforms/web/entry-runtime-with-compiler.js。也就是vue的一開始的入口励负，從這里可以開始源碼的分析工作藕溅。
