VueJS学习之旅 01

近期VueJS非常的火，于是就想学学它是如何开发的。

以往学习一个新的框架，都是从官方的文档和一些大神的博文开始的。这次想换个思路，从源码开始。

接触前端技术也有几年了，用过了不少的框架和工具库。一直都是知其然而不知其所以然，也想借助框架源码的学习，来巩固一下基础知识。前端技术发展迅猛，习之如同逆水行舟，不进则退啊。呜呼，哀哉。。。

当然，开始之前也到官网简单的了解了一下基本原理和API。

---

OK! Let's go!

首先必然是从github上clone一份vuejs的源码到本地

git clone -b master https://github.com/vuejs/vue.git

我们先来看看dist目录下面都有哪些东西。

$ ls dist/
README.md  vue.common.js  vue.js  vue.min.js  vue.runtime.common.js  vue.runtime.js  vue.runtime.min.js

可以看到6个js文件和一个readme，那这些文件有哪些区别，可以到readme中看看。

1. 第一行给出了一个规则解释：以 common.js 结尾的文件是为构建工具准备的，不以 common.js 结尾的文件是为浏览器直接运行而准备的。
2. vue.js和vue.min.js，支持在浏览器中直接用script标签引入。其中vue.js硬编码为开发模式，vue.min.js硬编码为生产模式。
3. vue.common.js基于CommonJS标准构建，同时包含compiler。它是为打包工具（Webpack或Browserify）准备的。有别于浏览器构建版本，用来判断 开发/生产 模式的 process.env.NODE_ENV ，可以在构建过程中指定（非硬编码）。当运行于node环境时，vuejs会读取node环境的 process.env.NODE_ENV
4. vue.runtime.common.js，也是基于CommonJS标准构建，但是不包含compiler，这意味着你不能能使用 template 选项。但是仍然可以在 .vue 但文件组建中使用，因为如 vue-loader vueify 等会默认预编译模板。
5. vue.runtime.js，浏览器构建版本，不包含compiler。硬编码为开发模式。
6. vue.runtime.min.js，同vue.runtime.js。硬编码为生产模式。

接下来我们看看package.json还给我们提供了哪些信息。
打开package.json，其中有一行

"main": "dist/vue.runtime.common.js"

这意味着在使用模块化系统中通过一些代码引用模块时，默认引入的是 vue.runtime.common.js 文件。（既不能在代码中直接使用 template 选项）

import Vue from 'vue';
or 
var Vue = require('vue');

如果需要使用 template 该怎么做？

Webpack中可以用resolve.alias将vue模块指向其他的构建版本

resolve: {
 alias: {
   vue$: 'vue/dist/vue.common.js'
 }
}

Browserify中 aliasify 同样可以实现

OK，了解了这些之后，我们应该来看看具体的代码了。

打开dist/vue.js，发现文件不小，同时也不容易找到重点。不如我们直接打开src目录，看看代码结构。一目了然，结构很清晰。但是entries文件夹下的内容是做什么的，第一时间没有猜到，看来有必要结合以下build过程来了解一下。

下面来看看项目是如何build的吧。