Vue-hot-reload-api 源码解析

Vue-hot-reload-api 源码解析

起因

最近在搞san框架的热加载方案，自然是少不了向成熟的框架学习（偷窥ing）。热加载方案基本也只是主流框架在做，且做的比较成熟，大部分应用开发者并不会接触到这部分东西，所以相应的资料比较少。google了一下这个库，发现木有人做相应的解析，顺手记录下好了。

什么是Vue-hot-reload-api？

众所周知，*.vue文件为广大开发者提供了良好的开发体验，vue-loader的原理不多赘述，在vue的脚手架中，webpack通过vue-loader来解析*.vue文件，把template、js和style文件分离并让相应的loader去处理。

在这个过程中，vue-loader还会做些其他事情，比如向client端注入hot-reload相应的代码，构建时编译等等。

webpack的hmr原理也不多说了，vue的热加载就是通过注入的代码来实现组件的热更新，下面来看下使用时的文档和源码。

用法

先来看下官方文档。

你仅会在开发一个基于 Vue components 构建工具的时候用到这个。对于普通的应用，使用 vue-loader 或者 vueify 就可以了。

文档中明确说明了，一般使用不需要用到这个，只有在开发相应的构建工具时才会用到。

// 定义一个组件作为选项对象
// 在vue-loader中，这个对象是Component.options
const myComponentOptions = {
  data () { ... },
  created () { ... },
  render () { ... }
}

// 检测 Webpack 的 HMR API
// https://doc.webpack-china.org/guides/hot-module-replacement/
if (module.hot) {
  const api = require('vue-hot-reload-api')
  const Vue = require('vue')

  // 将 API 安装到 Vue，并且检查版本的兼容性
  api.install(Vue)

  // 在安装之后使用 api.compatible 来检查兼容性
  if (!api.compatible) {
    throw new Error('vue-hot-reload-api与当前Vue的版本不兼容')
  }

  // 此模块接受热重载
  // 在这儿多说一句，