学习vue2.5源码之第一篇——目录结构&找个切入点开始学习vue

目录结构

客官别急，先来看看源码的整体目录~以下是目前我自己看过vue源码的部分目录（不完整）

• build

  • alias 定义别名
  • config 定义各种构建方式
  • build

• dist

  • vue.js 构建后生成的文件，npm run dev后生成vue.js用于调试

• flow

  • flow是Facebook出品的，针对JavaScript的静态类型检查工具,为Javascript增加强类型系统的支持

• src

  • compiler 编译器 将模板字符串转化为AST，由AST再转化为本地代码，其中对代码进行优化
  • core
    • components
    • global-api
    • instance 实例初始化
    • observer 数据观察，响应式，双向绑定
    • util 工具类
    • vdom 虚拟dom
  • platforms 各种使用vue的平台
  • server 服务端使用

• test

  • unit 单元测试

找个切入点开始学习vue

学习vue源码，把源码下下来之后第一件事当然是把项目跑起来啦，看看什么回事

npm install
npm run dev 

我在运行第二条语句的时候出现了错误

Error: Could not load C:\vue\src\core/config (imported by C:\vue\src\platforms\web\entry-runtime-with-compiler.js): ENOENT: no such file
or directory, open 'C:\vue\src\core\config'

然后发现是rollup-plugin-alias插件中路径'/' 应该改为''，估计是有人提PR出现bug了，解决方法是将node_modules/rollup-plugin-alias/dist/rollup-plugin-alias.js 第81行：
var entry = options[toReplace]; 改为 var entry = normalizeId(options[toReplace]); 就没问题啦~

run成功后会在dist文件夹中生成vue.js文件，有了这个文件，我们就可以通过引入它来写一下demo，边写栗子边打断点边看源码，这样会更加便于我们对源码的了解哦~

然后我们看一下package.json文件script里面dev指令究竟做了什么：

rollup -w -c build/config.js --environment TARGET:web-full-dev

这时候又有疑惑了，rollup又是啥，然后又谷歌了一番，得知这玩意儿大概也是一个前端模块的打包利器，通过tree-shaking的方式让你的bundle最小化（这是多亏es6中解构赋值的语法才形成的好方法），它还提供了sourcemap功能（其实我感觉和webpack差不多，就webpack实现了代码拆分按需加载，而rollup生成更简洁的代码一次性执行）

再看回上文的指令，-w 指的是watch，-c build/config.js 指定配置文件是build/config.js，--environment TARGET:web-full-dev指的是process.env.TARGET的值等于 web-full-dev，emmm..接下来我们进到build/config.js看看里面是啥

我找到了web-full-dev的对应代码

// Runtime+compiler development build (Browser)
  'web-full-dev': {
    entry: resolve('web/entry-runtime-with-compiler.js'),
    dest: resolve('dist/vue.js'),
    format: 'umd',
    env: 'development',
    alias: { he: './entity-decoder' },
    banner
  },

所以跟着代码走到了genConfig函数，得知这个文件的输出结果是

module.exports = genConfig({
    entry: path.resolve(__dirname, '../src/platforms/web/web-runtime-with-compiler.js'),
    dest: path.resolve(__dirname, '../dist/vue.js'),
    format: 'umd',
    env: 'development',
    alias: { he: './entity-decoder' },
    banner
})

所以入口文件就是../src/platforms/web/web-runtime-with-compiler.js，现在我们就可以一步一步寻找vue的足迹啦。

从入口文件开始寻找它是从哪里import出vue的，然后一步一步的找

import Vue from './runtime/index'

到

import Vue from 'core/index'

再到

import Vue from './instance/index'

终于...找到了core/instance/index文件，有种找到家的感觉有木有！instance文件夹从名字可以猜出应该是与vue实例初始化相关的文件，下一篇我们就从这里开始我们的vue之旅咯~！