vue学习笔记1

 一.vue源码目录结构的含义：

src下面的

compiler: 编译

core:

     components:  组件，包含 keep-alive.js

     global-api:     全局API，包括extend.js,   mixin.js         

     instance:实例，包含渲染的辅助函数：events.js,  init.js,   lifecycle.js

    observer: 和响应数据相关，是个核心概念，

    util: 工具方法

    vdom: vdom相关代码

platforms:

     web:  平时开发的浏览器的程序

     weex: 类似reactnative的跨端的应用

server: 所有和服务端渲染相关的

sfc: 简单的解释器

shared: 是一些辅助的方法，例如常量，工具方法

 

二.

1.scripts目录下的builds是构建文件，config.js最后一行

exports.getAllBuilds = () => Object.keys(builds).map(genConfig)

获取builds的key值，往上找到builds，发现里面有很多resolve函数，往上找到resolve函数的定义，而resolve里面用到了aliases,然后找到aliases的定义，继续找到alias.js文件，发现module.exports中有很多resolve方法，结合该文件里的resolve函数分析，发现他们定位到的是vue下面src里面的platforms目录里面web目录里面的

entry-runtime-with-compiler等文件

即vue/src/platforms/web/entry-runtime-with-compiler

实际上，alias就是提供了一个到真实文件地址的映射

 

 

对于scripts/config.js里面builds，里面的format有cjs,和es两种格式，分别对应到vue/dist里面的vue.runtime.common.dev.js，

vue.runtime.esm.js文件，其中cjs格式对应的文件里面最后一行是

module.exports = Vue;

而es格式对应文件的最后一行是

export default Vue;

也就是可以通过不同的format构建出不同的版本

format除了上面两种格式,还有umd的格式，

结合vue/dist/vue.js的第一个函数可以分析出，其实format对应早期的common.js,AMD

导出不同格式的js

 

2.banner:生成注释，例如vue/dist/vue.common.js里面的注释

vue.common.js里面，首先生成builds数组，然后if(process.argv[2])判断后面为--web 还是--weex,从而过滤掉不需要编译的文件，留下需要的编译的文件，然后对于编译的build方法，里面定义了next方法，该方法中调用了buildEntry(),

buildEntry中调用rollup编译config,config编译完就拿到bundle,然后通过generate产生output,判断code是否需要压缩，然后

调用write函数的fs.write方法，生成在dist目录下