vue源码阅读记录（一）

在进行过无数次Vue源码阅读未果后，这次要再一次认真的阅读，小白起步咯

1 阅读第一步是什么？当然是下载源码了

源码地址： vueGithub地址

拿到源码的第一步看目录结构了 （如下图）

这么看好迷茫 迷茫没关系 我找到了一份对目录结构的说明如下（引用自：http://hcysun.me/vue-design/art/1start-learn.html）

├── scripts ------------------------------- 构建相关的文件，一般情况下我们不需要动
│   ├── git-hooks ------------------------- 存放git钩子的目录
│   ├── alias.js -------------------------- 别名配置
│   ├── config.js ------------------------- 生成rollup配置的文件
│   ├── build.js -------------------------- 对 config.js 中所有的rollup配置进行构建
│   ├── ci.sh ----------------------------- 持续集成运行的脚本
│   ├── release.sh ------------------------ 用于自动发布新版本的脚本
├── dist ---------------------------------- 构建后文件的输出目录
├── examples ------------------------------ 存放一些使用Vue开发的应用案例
├── flow ---------------------------------- 类型声明，使用开源项目 [Flow](https://flowtype.org/)
├── packages ------------------------------ 存放独立发布的包的目录
├── test ---------------------------------- 包含所有测试文件
├── src ----------------------------------- 这个是我们最应该关注的目录，包含了源码
│   ├── compiler -------------------------- 编译器代码的存放目录，将 template 编译为 render 函数
│   ├── core ------------------------------ 存放通用的，与平台无关的代码
│   │   ├── observer ---------------------- 响应系统，包含数据观测的核心代码
│   │   ├── vdom -------------------------- 包含虚拟DOM创建(creation)和打补丁(patching)的代码
│   │   ├── instance ---------------------- 包含Vue构造函数设计相关的代码
│   │   ├── global-api -------------------- 包含给Vue构造函数挂载全局方法(静态方法)或属性的代码
│   │   ├── components -------------------- 包含抽象出来的通用组件
│   ├── server ---------------------------- 包含服务端渲染(server-side rendering)的相关代码
│   ├── platforms ------------------------- 包含平台特有的相关代码，不同平台的不同构建的入口文件也在这里
│   │   ├── web --------------------------- web平台
│   │   │   ├── entry-runtime.js ---------- 运行时构建的入口，不包含模板(template)到render函数的编译器，所以不支持 `template` 选项，我们使用vue默认导出的就是这个运行时的版本。大家使用的时候要注意
│   │   │   ├── entry-runtime-with-compiler.js -- 独立构建版本的入口，它在 entry-runtime 的基础上添加了模板(template)到render函数的编译器
│   │   │   ├── entry-compiler.js --------- vue-template-compiler 包的入口文件
│   │   │   ├── entry-server-renderer.js -- vue-server-renderer 包的入口文件
│   │   │   ├── entry-server-basic-renderer.js -- 输出 packages/vue-server-renderer/basic.js 文件
│   │   ├── weex -------------------------- 混合应用
│   ├── sfc ------------------------------- 包含单文件组件(.vue文件)的解析逻辑，用于vue-template-compiler包
│   ├── shared ---------------------------- 包含整个代码库通用的代码
├── package.json -------------------------- 不解释
├── yarn.lock ----------------------------- yarn 锁定文件
├── .editorconfig ------------------------- 针对编辑器的编码风格配置文件
├── .flowconfig --------------------------- flow 的配置文件
├── .babelrc ------------------------------ babel 配置文件
├── .eslintrc ----------------------------- eslint 配置文件
├── .eslintignore ------------------------- eslint 忽略配置
├── .gitignore ---------------------------- git 忽略配置

还是不清楚呀：但是有些文件我们是认识的，比如.babelrc， .gitignore 这些我们开发中经常的配置，然后就是 package.json （感觉可以从这里下手）
package.json的作用：

• npm在package.json文件中管理项目的依赖项以及项目的元数据。
• node执行js中require的时候，也会根据package.json中的依赖项查找

下面就来看package.json

一些字段的说明

browser: browser指定该模板供浏览器使用的版本。Browserify这样的浏览器打包工具，通过它就知道该打包那个文件。
main: 指定了加载的目录文件 默认是模块根目录下的index.js
config: 用于添命令行的环境变量
	下面关于config 的理解
	// package.json
	{
	  "name" : "foo",
	  "config" : { "port" : "8080" },
	  "scripts" : { "start" : "node server.js" }
	}
	// server.js可以引用config字段的值
	http
	  .createServer(...)
	  .listen(process.env.npm_package_config_port)
	  用户执行npm run start命令时，这个脚本就可以得到值。
	  $ npm config set foo:port 80 (可以改变这个值)
Script： 指定了运行脚本命令的npm命令行缩写
main和module互换他们是同样的事情
module将指向具有ES2015模块语法的模块，但仅指向目标环境支持的语法功能

umd/amd/cmd模块的写法

看一下script字段(掉了测试相关以及weex相关)

"scripts": {
	  // 构建完整版 umd 模块的 Vue
    "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev",
    // 构建运行时 cjs 模块的 Vue
    "dev:cjs": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-cjs",
    // 构建运行时 es 模块的 Vue
    "dev:esm": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-esm",
    // 构建 web-server-renderer 包
    "dev:ssr": "rollup -w -c scripts/config.js --environment TARGET:web-server-renderer",
    // 构建 Compiler 包
    "dev:compiler": "rollup -w -c scripts/config.js --environment TARGET:web-compiler ",
    "build": "node scripts/build.js",
    "build:ssr": "npm run build -- vue.runtime.common.js,vue-server-renderer",
    "lint": "eslint src build test",
    "flow": "flow check",
    "release": "bash scripts/release.sh",
    "release:note": "node scripts/gen-release-note.js",
    "commit": "git-cz"
  },

npm run dev 执行起来----- rollup -w -c scripts/config.js --environment TARGET:web-full-dev
（突然发现要看一下rollup了 跑去偷偷学习一下： rollup文档了解一下？）
（我也要写写学习笔记呀 这里先占个位）
该脚本表示：
rollup对源码进行 打包 -w 监听是否有修改
-c 指定rollup配置文件为 script/config.js
–enviroment TARGET: web-full-dev 传递参数 给enviroment TARGET为web-full-dev

运行结果

然后就可以 在dist/vue.js 看完整的源码了。