如何让指定元素拥有模块热替换？

[LinLin00000000]

一般我开发脚本都是使用 document.querySelector 获取页面上的元素进行一些修改，而不是直接把一个前端框架放在旁边。
当我在 dev 模式中使用 document.querySelector 对页面元素做修改时，无法享受到 vite 的 hmr 功能，只有 [vite] page reload src/main.js ，也就是把整个网页重新加载。
而我的目标页面元素繁多，加载非常慢，而且我每打一行代码就会刷新一次，频繁刷新体验不太好。
有没有什么办法可以指定一些元素，让它带上 hmr 功能？

[lisonge]

这明显是一个和 vite 相关的问题，你可以去 https://github.com/vitejs/vite/issues 搜索

或者直接参考 hmr api https://cn.vitejs.dev/guide/api-hmr

---

频繁刷新体验不太好

你可以使用 import.meta.hot.accept 接收模块的更新来避免页面刷新

[LinLin00000000]

谢谢

[LinLin00000000]

实现了，没用 vite，用了一些奇技淫巧😋

[WingGao]

这里给出一个热更新的示例，
首先需要创建一个src/dev.ts 文件，并把它作为入口

// vite.config.ts
...
monkey({
  entry: 'src/dev.ts',
  ...
})

// src/dev.ts
import {main} from './main' //主要逻辑

// 开启动态加载
if (import.meta.hot) {
  import.meta.hot.accept((newModule) => {
  })
}
main()

再在src/main.ts 文件中编写逻辑。这样就能自动替换main.ts而不会刷新页面

// src/main.ts
export function main(){
// code here
}