Regularjs 热更新

快速开始

1. install

pnpm install regularjs-hot -D

2. add regularjs-hot-loader

// webpack.config.js
module.exports = {
  ...,
  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        use: ['regulajs-hot/regularjs-hot-loader'],
      },
    ],
  },
}

3. import hot-reload runtime api in your root.js

import hotApi from 'regularjs-hot/hot-api';
hotApi.hot(Regular, {
  root: '#app', // app根节点
  hotOnly: true, // hotOnly为true时表示热更新出现错误，或者不支持热更新时重载浏览器
  hooks: {
    onHotUpdate(instance) {}, // 热更新组件实例的时候对组件实例做处理
    onProcessModifyInstance(instance, modifyInstance) {}, // 热更新时会重新执行modifyComponent函数，这里可以处理相关逻辑
  },
  ignoreReplaceDataKeys: [], // 热更新时会重新执行生命周期，实例data会被替换成初始值，不想要被替换的值可以加入ignoreReplaceDataKeys
});

贡献

如果你有关于Regularjs热更新更好的意见，欢迎讨论和Contribute

原理

regularjs-hot-loader

该WebpackLoader的主要作用是

1. 在Component.extend(options)的options中插入根据当前组件路径生成的uniqueId，该id的主要作用是在组件实例化时将该实例加入map中

const Component = Regular.extend({
  __REGULAR_HOT_ID__: '74e3f0f7', // 根据文件路径生成，同一个路径生成同一个id
  template: '<div on-click={this.handleClick()}>组件</div>',
  name: 'xxx',
  data: {
    count: 2000
    },
  });

2. 在组件文件底部插入一段如下代码

/* regular hot reload */
if (module.hot) {
  const _exports = module.exports;
  if (window.__REGULAR_HOT__) {
    // 首次执行当前文件时记录当前组件id
    // 再次执行（文件修改后）时重新渲染组件
    // __REGULAR_HOT__.api由入口文件引入hotApi.hot()时注册
    __REGULAR_HOT__.api.createOrReload('${ids}', _exports);
      // 如果当前文件导出的全是Regular组件，只更新当前文件，否则，更新当前文件和引入当前文件的文件
      if (__REGULAR_HOT__.api.exportReguarCompOnly(_exports)) {
        module.hot.accept();
      }
  }
}

hot-api

1. 提供运行时的方法，供regularjs-hot-loader插入的代码使用。
2. 注册一个map，存储组件id及其对应的构造函数和实例。 map结构：

{
    "0d182adc": { // 组件id
        "instances": [], // 实例列表
        "ctor": RegularComponent // 组件构造函数
    }
}

3. 重写Regular.extend a. 混入$config事件方法，该方法主要是在map存储当前组件实例，以及绑定组件destroy事件，组件销毁时从map中删除当前实例。 b. 混入enter、mount方法，记录最新的路由options（热更新时重新走enter、mount逻辑），热更新时如果当前组件存在enter或者mount，将会传入该options执行enter、mount方法。
4. 重写regualrjs/walkers component方法，主要是在组件实例上加上_props属性，辨别data上哪些属性是通过父组件传的，哪些属性是自身的，以便在热更新时保证组件data与热更新前的data保持一致。
5. 配置项目根节点、热更新钩子、hotOnly等配置。

热更新流程图