首先,如果要阅读类似Vue这种工具库或者框架库的代码,最好先去看一下package.json的scripts部分。这里能看到代码打包入口,实际上也就是我们分析代码的入口,我们具体看一下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,然后进入这个文件可以看到这样一行代码let builds = require('./config').getAllBuilds()
,这个./config
文件保存了开发和生产环境的entry和output文件,我们进去找到web的browser prod下的打包文件入口和产出即可,配置如下:
// 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的区别,runtime-prod表示没有template编译器,而full-prod表示有。如果你使用webpack + vue-loader那么可以考虑直接使用runtime-prod,如果是考虑直接在index.html中随意编写一个Vue应用,那么使用full-prod。
本文重点分析full-prod。所以直接看full-prod的入口,是web/entry-runtime-with-compiler.js。
,不过发现源码里面并没有这个文件,然后注意到scripts/config.js
这一段代码:
const aliases = require('./alias')
const resolve = p => {
const base = p.split('/')[0]
if (aliases[base]) { // 如果发现有alias,那么替换alias为对应的实际路径
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
实际上就是src/platforms/web/entry-runtime-with-compiler.js
。也就是vue的一开始的入口,从这里可以开始源码的分析工作。