边喝热水边学Vue源码之二--目录结构和源码构建
## 目录结构在从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` 字段，摘抄部分如下：
```js
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页面。
```js
// 需要编译器的版本Compiler
new Vue({
template: '<div>{{ hi }}</div>'
})
// 这种情况不需要 Compiler
new Vue({
render (h) {
return h('div', this.hi)
}
})
```
同样效果的代码，写法不同所需要使用的编译环境也就不同了。
#### 个人感觉
预编译和离线编译是同一个意思
这两天写了的东西时发现也存在半吊子的作者比如我，有些写的东西我未必真懂，如果误导了谁算你倒霉，所以要先思考要质疑再接受，\狗头 \狗头 间接说明审稿人的存在时很有必要的，可以防止误导大众，即使误导了别人审稿人也是有责任的，哈哈。 ggnb，发布的帖子可以重新编辑，我发现了好多错别字，{:4_89:} compiler的功能和sfc的有区别吗，好像都是编译文件生成html的代码呀，哪位哥哥知道区别？
页:
[1]