vite学习笔记（二）

1、vite 中 HMR 热更新功能

目前来讲，vite的 hmr 热更新比较有局限性，它更适合.vue文件，因为.vue文件中的内容相对固定，下面采用的是 vanilla 下的typescript进行测试

// 需要对main.ts中的代码作相应的调整
import './style.css'
import typescriptLogo from './typescript.svg'
import { setupCounter } from './counter'
import { ModuleNamespace } from 'vite/types/hot'

export function render() {
  document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" 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 112121 on the Vite and TypeScript logos to learn more
    </p>
  </div>
`

  setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)
}

render()


// 热更新的关键代码
if (import.meta.hot) {
  import.meta.hot.accept((newModule: ModuleNamespace | undefined) => {
    if (newModule) newModule.render()
  })
}

 注意： 这里是已知该文件中已有render方法，通过调用vite中的hot进行实现，函数中newModule中通过热更传入的新的当前模块，所以需要用新的当前模块的render进行更新