在开发环境下，在入口 JS 文件中暴露出 mount 和 unmount 两个钩子函数，来实现脚本的更新，是否可行？

[showlotus]

用这个工具开发脚本时，我遇到一个很不方便的问题。每当脚本热更新后，都会重新刷新浏览器页面，如果当前浏览器页面内容很多时，每次刷新，都意味着有很大的代价（很长的等待时间）。

然后，我就在想，如果暴露出两个钩子函数：mount（挂载时执行）、unmount（卸载时执行），这样当脚本热更新时，先去执行 unmount，然后再去执行 mount，这样是不是就不需要刷新页面了，每次更新后的代价就能降低很多。

这种模式有点类似于微前端，每个脚本就相当于一个子应用。每次更新就相当于：先卸载子应用，然后再重新挂载子应用。不过，对于脚本开发者来说，可能需要处理的东西就比较多了。比如，如果要在当前页面里添加一个 DOM 元素，那么在 unmount 钩子里就要去移除这个 DOM 元素，否则每次执行完 mount 就会添加一个 DOM 元素。看起来也还行，无论接触过 Vue 还是 React，应该对这种组件生命周期都有过了解，也大致明白如何去开发。

还想到一个点，因为每次脚本热更新后，开发环境的 entrySrc 的地址是不变的，所以如果由插件内部去管理 mount 和 unmount 的执行时机，是不是更合理一点？

就比如，当热更新时，插件内部先去从 entrySrc 这个资源中获取到 unmount 钩子函数（如果获取不到的话，将 entrySrc 拆分成两个资源，一个用于 mount，一个用于 unmount 是不是也行呢？），然后执行它。再把 entrySrc 所在的 script 标签移除（移除一个 script 应该是不够的，因为还有 style 相关的，或者还有脚本内部引入的其他 script，这个可能得考虑如何处理？感觉参考微前端子应用卸载的处理方式，应该也能做到），这样插件的 unmount 阶段就执行完毕了。接着再把 entrySrc 这个资源重新加载到当前页面中，这样插件的 mount 阶段就执行了。脚本更新了，而页面却没有刷新。

大致就想到这么多，欢迎大家一起讨论～

[lisonge]

你把问题想的太复杂了，这是一个很简单的 vite 的问题，不是 vite-plugin-monkey 的问题

vite 已经提供了自定义控制 hmr 的 api

https://cn.vite.dev/guide/api-hmr.html#hmr-api

[lisonge]

样式是有热更新的

这是 vite 自带的对 css 文件的 hmr 逻辑

但是 JS **文件的更改却没有

你都没在你的代码里写 vite hmr 自更新逻辑，怎么可能会有呢？

文档已经在上面给你了

[lisonge]

[showlotus]

那也就是说 vite-plugin-monkey 内部没有对 JS 做热更新支持，默认用的是 Vite 原始的，更新后直接刷新页面的逻辑。可以这样理解不？

[lisonge]

是的，也没必要做这些支持，你的项目首先是一个 vite 项目，vite 已经提供了很多开箱即用的功能

[showlotus]

确实，我自己试了一下，发现很简单就可以实现了：

https://stackblitz.com/edit/vitejs-vite-hsgv7o92?file=src%2Fmain.ts

import './style.css';
import typescriptLogo from './typescript.svg';
import viteLogo from '/vite.svg';
import { setupCounter } from './counter.ts';

// 挂载
export function mount() {
  document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
    <div>
      <a href="https://vite.dev" target="_blank">
        <img src="${viteLogo}" class="logo" alt="Vite logo" />
      </a>
      <a href="https://www.typescriptlang.org/" target="_blank">
        <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
      </a>
      <h1>Vite + TypeScript</h1>
      <div class="card">
        <button id="counter" type="button"></button>
      </div>
      <p class="read-the-docs">
        Click on the Vite and TypeScript logos to learn more
      </p>
    </div>
  `;

  // 设置计数器
  setupCounter(document.querySelector<HTMLButtonElement>('#counter')!);

  // 额外新增的 DOM 节点
  const div = document.createElement('div');
  div.classList.add('dynamic-div');
  div.textContent = new Date().toLocaleString();
  document.body.appendChild(div);
}

// 卸载
export function unmount() {
  // 卸载时，移除新增的 DOM 节点
  const divs = document.querySelectorAll('div.dynamic-div');
  divs.forEach((div) => div.remove());
}

// 初始化渲染
mount();

// 添加 HMR 支持
if (import.meta.hot) {
  import.meta.hot.accept((mod) => {
    // 卸载
    mod?.unmount();
    // 挂载
    mod?.mount();
  });
}

十分感谢🙏，又学到新东西了～