vue源码阅读（启）：如何开启源码的阅读

vue 源码

想要阅读源码，但是从github上面拉下来代码之后，却不知如何下手。我想这是很多人遇到的难题。

以vue2.6.x系列为例，当我们git pull 源码之后，打开文件结构，可能会一脸懵逼。这时候，我们需要对源码的基本结构有一个大致的了解。

了解源码的基本结构

/vue
    /dist :生成最终文件存放的文件夹
    /example : 官方提供的案例代码
    /flow : flow类型声明文件
    /packages : 代码里用到的独立外部包文件
    /scripts : 打包脚本，配置等
    /src : 核心代码
        /compiler : 编译器
        /core  : 核心代码（通用代码）
        /platforms : 平台代码（特殊代码）
            /web  : 网页端代码
            /weex : 移动端代码
        /server ： 服务端相关
        /sfc : 单文件解释器
        /shared : 共享逻辑代码
    /test : 测试文件

这些文件夹的含义，大致可以通过其名字就可以知道大致的作用。其中src下面的三个文件夹，将会是源码阅读的重点：compiler、core、platforms。

那么，下一个问题来了，我们如何去阅读源码呢？整个项目的入口在哪里？

这个时候我们需要看看 package.json 的指令。查看dev命令：

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

我们看到了TARGET有一个指向：web-full-dev。其含义应该是web环境下的Dev模式。全局搜索整个关键字，发现在/scripts/config.js文件中有这样的描述：

// runtime-only build (Browser)
  'web-runtime-dev': {
    entry: resolve('web/entry-runtime.js'),
    dest: resolve('dist/vue.runtime.js'),
    format: 'umd',
    env: 'development',
    banner
  }

这个时候，通过解析resolve函数，我们就可以发现入口文件在src/platforms/web/entry-runtime-with-compiler.js。

于是，找到入口了。

使用chrome浏览器的调试功能

下一步，我们希望能够在本地能够调试源码。这个时候，我们需要做下面的步骤：

1.安装依赖：npm i
2.安装rollup : npm i -g rollup
3.修改package.json的dev脚本，添加sourcemap属性，让调试时候可以定位到源码

 "dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev"

4.运行开发命令：npm run dev
5.编写一个最简单的html文件，引用创建的vue.js文件。

 <script src="path/to/dist/vue.js"></script>

6.使用chrome浏览器打开该文件。
7.接下来就可以在浏览器愉快地调试代码了。