从最基本的目录结构开始,逐渐深入,主要是为留痕,以便以后查阅
0 版本
版本:3.3.8
1 目录结构
├─changelogs // 更新日志
├─packages // 源码和测试代码
│ ├─compiler-core // 跨平台的框架
│ ├─compiler-dom // 浏览器端编译器
│ ├─compiler-sfc // .vue 文件解析器
│ ├─compiler-ssr // 服务端解析器
│ ├─dts-test //
│ ├─reactivity // 响应式系统的实现
│ ├─reactivity-transform // 提供响应性语法糖,听说已经被移除了,但在最新的包里面还可以看见
│ ├─runtime-core // 包含虚拟 DOM 渲染器、组件实现、全局的js API。
│ ├─runtime-dom // 对 原生DOM API、属性、样式、事件等管理。
│ ├─runtime-test // 用于测试 runtime-core 的轻量级运行时,仅适用于vue内部测试
│ ├─server-renderer // 服务端渲染的核心实现
│ ├─sfc-playground // 与 template-explorer 类似,不仅包含 template 部分的编译,还包含了 script 与 style 部分的编译。
│ ├─shared // 包含多个包共享的内部实用工具库
│ ├─template-explorer // 用于调试模板编译输出工具。
│ ├─vue // vue完整包
│ └─vue-compat // vue3 的构建版本,提供可配置的 vue2兼容行为。
└─scripts // 编译构建代码
1.1 目录解释
- compiler-core: Vue.js 是一个跨平台的框架,既可以在浏览器端编译,也可以在服务器端编译。compiler-core 包含所有与平台无关的代码转换插件。
- compiler-dom: 在浏览器端编译时,会使用 compiler-dom 提供的编译器,它是在 compiler-core 的基础上进行的封装。compiler-dom 包含了专门针对浏览器的代码转换插件。
- compiler-sfc: 用于实现 .vue 文件的解析,以及 template、script、style 的解析的相关代码都是由 compiler-sfc 模块实现的。
- compiler-ssr: 在服务端编译时,会使用 compiler-ssr 提供的编译器。它是专门针对服务端渲染的转换插件。
- runtime-core: 包含了与平台无关的运行时核心实现(vue核心代码),包括 虚拟DOM的渲染器、组件实现和一些全局的 JS API。
- runtime-dom: 基于 runtime-core 创建的以浏览器为目标的运行时,包括对原生 DOM API、属性、样式、事件等管理。
- reactivity: 包含响应式系统的实现,是 runtime-core 包的依赖,也可以作为与框架无关的包独立使用。
- server-renderer: 包含服务端渲染的核心实现,是用户在使用 Vue.js 实现服务端渲染时所需要依赖的包。
1.2 构建版本
比较常见的是构建出来的Vue会有vue.global.js或者vue.runtime.global.js两种版本,他们分别表示:
- vue.global.js:是包含编译器和运行时的“完整”构建版本,因此它支持动态编译模板。
- vue.runtime.global.js:只包含运行时,并且需要在构建步骤期间预编译模板。
其中,如果需要在客户端上编译模板 (即:将字符串传递给template 选项,或者使用元素的DOM内HTML 作为模板挂载到元素),将需要编译器,因此需要完整的构建版本,如下代码所示:
// 需要编译器
Vue.createApp({
template: '<div>{{ hi }}</div>'
})
// 不需要
Vue.createApp({
render() {
return Vue.h('div', {}, this.hi)
}
})
当使用Webpack的vue-loader时,*.vue 文件中的模板会在构建时预编译为JavaScript,在最终的捆绑包中并不需要编译器,因此可以只使用运行时构建版本。所以,如果直接在浏览器打开Vue的页面,可以直接采用<script>
引入完整版本,如果采用构建工具例如Webpack进行构建,则可以使用import引入运行时版本,和构建相关的脚本源码都在scripts下面。例如,当我们需要构建出完整版时,可以在根目录执行,或者修改package.json的dev命令:
node scripts/dev.js -f global-runtime
当需要构建运行时版本,执行:
node scripts/dev.js -f global
具体的-f参数以及其他参数配置含义可以在rollup.config.js里面找到。
执行完成后在packages\vue\dist目录下可以得到对应的文件。所有Vue 3可构建出来的版本如下所示:
// cjs(用于服务端渲染)
vue.cjs.js
vue.cjs.prod.js(生产版,代码进行了压缩)
// global(用于浏览器<script src="" />标签导入,导入之后会增加一个全局的Vue对象)
vue.global.js
vue.global.prod.js(生产版,代码进行了压缩)
vue.runtime.global.js
vue.runtime.global.prod.js(生产版,代码进行了压缩)
// browser(用于支持ES6 Modules浏览器<script type="module" src=""/>标签导入)
vue.esm-browser.js
vue.esm-browser.prod.js(生产版,代码进行了压缩)
vue.runtime.esm-browser.js
vue.runtime.esm-browser.prod.js(生产版,代码进行了压缩)
// bundler(这两个版本没有打包所有的代码,只会打包使用的代码,需要配合打包工具来使用,会让Vue体积更小)
vue.esm-bundler.js
bue.runtime.esm-bundler.js