搭建vue源码的阅读环境

源码阅读

阅读源码是建立在对vue各种api熟练运用的情况下的。

1. 安装源码依赖 npm install
2. npm run dev是否可以打包成功

代码结构：

• bechmarks：该目录是做性能测试的
• dist：最终打包的结果都放到了该目录
• examples：官方案例
• flow：类型检测（vue2使用，类似于ts，但是没有ts好用）
• packages：放的都是一些源代码包，模块。（vue源码中包含了weex）
• scripts：所有打包的脚本都放在这里
• scr：源代码目录

scr目录：

• compiler：模板编译
• core：vue2核心代码包
• platforms：平台，跨平台使用
• server：ssr服务端渲染
• sfc：单文件组件，解析单文件模板（需要结合vue-loader使用的）
• shared：模块之间共享的属性和方法

找打包入口：配置文件，scripts/config.js

打包入口：

我们只关心两个：

1. web/entry-runtime.js
2. web/entry-runtime-with-compiler.js

然后找到配置文件的真实位置

const aliases = require('./alias')
// web/entry-runtime-with-compiler.js
const resolve = p => {
  // web, entry-runtime-with-compiler.js
  const base = p.split('/')[0]
  if (aliases[base]) {
    // web: resolve('src/platforms/web')
    // src/platforms/web/entry-runtime-with-compiler.js
    // 找别名 然后文件找到绝对路径
    return path.resolve(aliases[base], p.slice(base.length + 1))
  } else {
    return path.resolve(__dirname, '../', p)
  }
}

src/platforms/web/entry-runtime-with-compiler.js

两个入口文件的区别：

entry-runtime-with-compiler文件就是重写了 $mount方法，支持把template转为render函数了。

当然，这两文件也并不是真正的入口，

去往runtime包。这个包提供的就是运行时vue是如何处理的。

所谓的运行时，会提供一些dom操作的api，比如属性操作，元素操作，也提供了一些组件和指令。

前往Vue构造函数所在的文件：

• 从web/runtime/index前往 core/index.js，发现这个文件也不是入口

• globalAPI实现了很多全局API

• 接下来去往instance/index文件，这里是Vue真正的入口文件，有Vue构造函数了。

源代码调试

想知道每一个具体是如何实现的：

1. 掌握了核心流程，可以单独去看源码
2. 不知道核心流程，可以写一些测试用例，或者写一些案例来调试源代码

我们在打包时，需要生成sourcemap文件进行ES6-ES5的联调，关联源码调试

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

不知道源码的核心流程，就在浏览器这里打断点调试，知道流程可以去对应的源码部分打断点调试。