目录结构
在从GitHub上下的源码中找到 dist 下文件目录
Win10系统下打开Powershell cd
到当前目录下\vue-2.6.14\dist
使用tree /f >a.txt
生成,文件模块的命名很清晰
├─compiler # 编译相关
│ ├─codegen
│ ├─directives
│ └─parser
├─core # 核心代码
│ ├─components
│ ├─global-api
│ ├─instance
│ │ └─render-helpers
│ ├─observer
│ ├─util
│ └─vdom
│ ├─helpers
│ └─modules
├─platforms # 支持多平台
│ ├─web
│ │ ├─compiler
│ │ │ ├─directives
│ │ │ └─modules
│ │ ├─runtime
│ │ │ ├─components
│ │ │ ├─directives
│ │ │ └─modules
│ │ ├─server
│ │ │ ├─directives
│ │ │ └─modules
│ │ └─util
│ └─weex
│ ├─compiler
│ │ ├─directives
│ │ └─modules
│ │ └─recycle-list
│ ├─runtime
│ │ ├─components
│ │ ├─directives
│ │ ├─modules
│ │ └─recycle-list
│ └─util
├─server # 服务端渲染
│ ├─bundle-renderer
│ ├─optimizing-compiler
│ ├─template-renderer
│ └─webpack-plugin
├─sfc # .vue 文件解析
└─shared # 共享代码
compiler
编译相关
将模板代码编译为AST树、AST树的优化、AST树转对应的代码
编译的工作可以在构建时做,也可以在运行时做,但编译是耗时的工作,所以推荐使用前者
这里代码生成的功能是生成什么样的代码,html的?
core
核心相关
内置组件、全局API封装、Vue实例化、观察者、虚拟dom、工具函数等等。
platforms
打包为对应平台的版本
不同的平台所运行的代码是有差异的,虽然网页端统称为web,但是有很多基于原生网页的开发且具有一定的影响力,这里推出了web和weex两个类打包应用
server
服务端渲染
由于知识储备不足,不是很理解vue作为前端框架,打包后应该是web资源,怎么会利用的到服务器渲染。大意是这里的代码是运行在服务器上的nodejs中与网页的js有区别,不要弄混。下面是专业的介绍,
服务端渲染主要的工作是把组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序。
看文档说是服务端渲染,
sfc
解析vue文件,最后解析成为一个js的对象
shared
一些工具方法,复用代码。
源码构建
打包的两个工具webpack 和 rollup,webpack会打包全部的web资源比如图片的静态资源,所以打包后的文件比较大;rollup仅打包js相关的资源,打包后的文件算是js的库比较轻量,vue选择的是rollup。
后面我也看到的用webpack能打包,多会一个工具总没有错的,可能是不同版本。
构建脚本
也就是说\dist\vue.x.js
都是编译生成的结构,并不是作者在电脑上编写出来,为了编写出更多平台使用的代码就需要配置一些参数。这些js文件是在scripts\config.js
的配置中看到,每个配置都要dest
字段,摘抄部分如下:
const builds = {
// Runtime only (CommonJS). Used by bundlers e.g. Webpack & Browserify
'web-runtime-cjs-dev': {
entry: resolve('web/entry-runtime.js'),
dest: resolve('dist/vue.runtime.common.dev.js'),
format: 'cjs',
env: 'development',
banner
}
构建过程
scripts\build.js
有很多功能,但我听明白的就有一个,生成的js文件内代码是否需要压缩,如果带有min
参数就生成vue.x.min.js
的文件,里面的代码是用于生产环境下的。
使用别名
scripts\alias.js
内容不多,不过没看明白是什么意思,为什么要用别名,是因为原名比较长不方面阅读码?
Runtime Only VS Runtime + Compiler
Runtime Only 版本的编译是借助webpackde的vue-loader工具把.vue文件编译为js,离线编译只需要编译需要运行使用的vue.js代码,因此代码体积也会更轻量。
Runtime + Compiler 运行时编译,在开发测试时将编写的template模板编译为可以展示的web页面。
// 需要编译器的版本 Compiler
new Vue({
template: '<div>{{ hi }}</div>'
})
// 这种情况不需要 Compiler
new Vue({
render (h) {
return h('div', this.hi)
}
})
同样效果的代码,写法不同所需要使用的编译环境也就不同了。
个人感觉
预编译和离线编译是同一个意思
这两天写了的东西时发现也存在半吊子的作者比如我,有些写的东西我未必真懂,如果误导了谁算你倒霉,所以要先思考要质疑再接受,\狗头 \狗头 间接说明审稿人的存在时很有必要的,可以防止误导大众,即使误导了别人审稿人也是有责任的,哈哈。