SvelteKit/Vite中HMR与import.meta.glob同步异常问题求助

问题背景 #

使用import.meta.glob("/modules/**/*.md", {eager: true})批量导入MD文件解析站点内容时，首次修改MD文件的frontmatter元数据，HMR热更新能正常生效；但第二次修改保存后，虽然HMR触发，页面仍显示旧内容，必须手动刷新才能加载最新的frontmatter数据。测试代码如下：

modules = import.meta.glob("/modules/**/*.md", {eager: true});
console.log(modules["/modules/builds/5inch-beginner/1-16-5-2022-motors-emax-eco-2.md"].metadata.title)

另外发现，若相关逻辑在单个文件内定义运行则正常，存在最小复现场景。

排查思路 #

• eager: true的缓存特性：import.meta.glob的eager模式会在项目初始构建时就加载所有匹配的模块，并将模块引用缓存到返回的对象中。当HMR更新单个MD模块时，这个缓存的对象不会自动替换旧的模块引用，导致后续读取的还是初始加载的旧数据。
• 模块作用域的变量缓存：如果modules变量定义在组件或模块的顶层作用域，只会在初始化时赋值一次，后续HMR更新时不会重新执行赋值逻辑，自然无法获取最新的模块数据。
• HMR更新的局限性：Vite的HMR默认只会更新单个修改的模块，但import.meta.glob返回的是静态映射对象，不会自动同步单个模块的更新到这个映射里。

解决方案 #

1. 避免顶层缓存模块对象，按需重新获取 #

不要在顶层作用域固定赋值modules，而是封装成函数，在需要读取数据时重新调用获取最新的模块映射：

function getLatestModules() {
  return import.meta.glob("/modules/**/*.md", {eager: true});
}

// 每次需要读取metadata时，先获取最新模块
const modules = getLatestModules();
console.log(modules["/modules/builds/5inch-beginner/1-16-5-2022-motors-emax-eco-2.md"].metadata.title);

如果是在Svelte组件中，可以结合响应式声明，确保数据变化时触发重新渲染：

<script>
  let modules = import.meta.glob("/modules/**/*.md", {eager: true});

  // 用响应式语句触发更新
  $: modules = import.meta.glob("/modules/**/*.md", {eager: true});
</script>

2. 利用HMR API手动监听更新 #

通过Vite的HMR API监听MD文件的变化，在回调中重新加载模块并更新引用：

let modules = import.meta.glob("/modules/**/*.md", {eager: true});

if (import.meta.hot) {
  // 监听所有MD文件的更新
  import.meta.hot.accept("/modules/**/*.md", () => {
    // 重新获取最新的模块映射
    modules = import.meta.glob("/modules/**/*.md", {eager: true});
    // 如果是Svelte组件，可手动触发状态更新
    // 比如绑定到响应式变量，或调用$refresh()（SvelteKit特定）
  });
}

3. 检查MD处理插件的配置 #

如果使用了MD处理插件（如vite-plugin-md），确保插件配置中开启了frontmatter的热更新支持，避免插件内部缓存旧的元数据。可以尝试在插件配置中添加hmr: true（若插件支持），或调整缓存策略。

4. 避免直接缓存metadata值 #

不要将metadata.title这类值提前缓存到变量中，而是每次都从最新的modules对象中读取，确保获取的是实时数据：

// 错误写法：缓存了旧值
const oldTitle = modules["xxx.md"].metadata.title;

// 正确写法：每次读取都从模块中获取
function getTitle(filePath) {
  return getLatestModules()[filePath].metadata.title;
}

内容的提问来源于stack exchange，提问作者Vitroid