Regularjs 热更新
快速开始
1. install
pnpm install regularjs-hot -D2. 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的主要作用是
- 在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
},
});- 在组件文件底部插入一段如下代码
/* 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
- 提供运行时的方法，供regularjs-hot-loader插入的代码使用。
- 注册一个map，存储组件id及其对应的构造函数和实例。 map结构：
{
"0d182adc": { // 组件id
"instances": [], // 实例列表
"ctor": RegularComponent // 组件构造函数
}
}
- 重写Regular.extend a. 混入$config事件方法，该方法主要是在map存储当前组件实例，以及绑定组件destroy事件，组件销毁时从map中删除当前实例。 b. 混入enter、mount方法，记录最新的路由options（热更新时重新走enter、mount逻辑），热更新时如果当前组件存在enter或者mount，将会传入该options执行enter、mount方法。
- 重写regualrjs/walkers component方法，主要是在组件实例上加上_props属性，辨别data上哪些属性是通过父组件传的，哪些属性是自身的，以便在热更新时保证组件data与热更新前的data保持一致。
- 配置项目根节点、热更新钩子、hotOnly等配置。
热更新流程图
