携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第22天，点击查看活动详情

HMR

• 如果没有使用 HMR，vite 就不知道怎么处理，就会刷新整个页面
• 框架集成一般都带有 hmr，没有集成框架，vite 需要做一些配置

vite HMR API

• 创建一个没有框架集成的项目
• main.js

import "./style.css";

document.querySelector("#app").innerHTML = `
  <h1>Hello Vite!</h1>
  <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation12</a>
`;

• 修改代码

import "./style.css";

function render() {
  document.querySelector("#app").innerHTML = `
  <h1>Hello Vite!</h1>
  <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation12</a>
`;
}

render();

• 集成 hmr

import "./style.css";

export function render() {
  document.querySelector("#app").innerHTML = `
  <h1>Hello Vite!</h1>
  <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation12322</a>
`;
}

render();

if (import.meta.hot) {
  // 判断是否有 hot，因为生产版本没有 hot
  import.meta.hot.accept((newModule) => {
    // 接收文件模块更新
    // newMobule 对应这个文件的模块
    newModule.render(); // 必须调用 newModule 中的render方法，否则由于闭包作用只会调用老的render方法
  });
}

原理

• 浏览器中，连接了 webScoket，当我们更新 dom 时，会收到一条信息，通知我们更新

• http中会触发对应 文件 请求，新的文件会替换旧的文件

glob 批量处理功能

• 如果我们想引入一个文件夹下的所有文件，可以通过 import.meta.glob() 函数获得
• 此功能基于：fast-glob

使用 glob-import

• 创建一个文件夹，下面存放一些文件

// a.js
export default 'a'

// a.json
{
  "data": "a"
}

// b.js
export default 'b'

// b.json
{
  "data": "b"
}

// test-1.js
export default 'test'

• 获取文件内容

const globalModules = import.meta.glob('./glob/*')
console.log(globalModules)

Object.entries(globalModules).forEach(function ([k, v]) {
  console.log(k + '----' + v)
  v().then((m) => {
    console.log(m.default)
  })
})

• 通过打印，我们可以看到，使用import.meta.glob可以获取到模块的路径和动态import函数，执行次函数，可以异步加载的文件模块的内容

匹配方式

• 执行的文件匹配方式有如下几种
  • 匹配文件夹下的所有文件 './glob/*'
  • 匹配文件夹下的 js 文件 './glob/*.js'
  • 使用则正匹配文件 './glob/*-[0-9].js'

注意

• 这是 vite 专属的功能，换成其他框架编译不生效
• 编译完成之后是返回的文件 key-value 值

globEager

• 有的时候们想直接把代码编译进来，不需要异步引入，我们可以使用import.meta.globEager

const globalModules = import.meta.globEager('./glob/*-[0-9].js')
console.log(globalModules)

• 编译的源码中：