目录结构
image.png
Vue的不同构建版本
- 通过
npm run build打包出所有版本的文件 - 通过
dist/READMe.md，可以获取到不同版本的解释
| UMD | CommonJS | ES Module | |
|---|---|---|---|
| Full | vue.js | vue.common.js | vue.esm.js |
| Runtime-only | vue.runtime.js | vue.runtime.common.js | vue.runtime.esm.js |
| Full (production) | vue.min.js | ||
| Runtime-only (production) | vue.runtime.min.js |
术语解释
- 完整版：同时包含编译器和运行时的版本。
-
编译器：用来将模板字符串编译成为
JavaScript渲染函数的代码，体积大，效率低 -
运行时：用来创建
Vue实例，渲染并处理虚拟DOM等的代码，体积小，效率高。基本上就是除去编译器的代码。 -
UMD：UMD 版本通用的模块版本，支持多种模块方式，包括直接挂载到
window上。vue.js默认文件就是运行时 + 编译器的 UMD 版本。 - CommonJS：CommonJS版本用来配合老的打包工具比如Browserify或webpack 1。
-
ES Module：从2.6开始 Vue 会提供两个 ESM 构建文件，为现代打包工具提供的版本。
- ESM 格式被设计为可以被静态分析，所以打包工具可以利用这一点来进行
tree shaking，并将用不到的代码排除出最终的包。
- ESM 格式被设计为可以被静态分析，所以打包工具可以利用这一点来进行
寻找入口文件
-
在package.json中，找到打包的配置文件
image.png -
打开
scripts/config.js,找到文件导出的地方
image.png -
进入
genConfig()函数（按住command+鼠标左键）
image.png
先看genConfig()函数的第一行，根据传入的参数获取对应的选项，在npm run dev时，我们传入了TARGET:web-full-dev
-
进入
builds，找到web-full-dev
image.png -
进入
resolve()函数
image.png
获取到base的值：web，在aliases中找到对应的值
image.png
这样最后拼接出entry的地址：
src/platforms/web/entry-runtime-with-compiler.js
找到打包的入口文件！
解决一个问题
初始化时同时传入template和render，页面上会输出什么？
const vm = new Vue({
el: '#app',
tempalte: '<h3>Hello Template</h3>',
render (h) {
return h('h4', 'Hello Render!')
}
})
进去入口文件src/platforms/web/entry-runtime-with-compiler.js，找到$mount方法
image.png
- 通过查看会发现，如果传入了
render，就会使用传入的render，否则使用template - 那么
$mount是什么时候被调用的呢？打开浏览器的sources,给$mount方法加上断点，通过右侧的Call Stack可以查看到$mount的调用过程：在初始化Vue实例时，调用的init，在init中调用了$mount
image.png
一些其它的
- 下载vue源码后，给dev命令添加
--sourceMap,方便调试 - 收起所有代码，
command + k, 展开：command + 0
