如何在单页中展示文件夹内所有Svelte组件？

你原来的代码无法运行的核心问题是对import.meta.glob的用法理解有误，下面是修正后的实现方案：

正确实现代码 #

方式一：使用异步函数加载 #

<script lang="ts">
  // 获取指定文件夹下所有Svelte组件的导入函数
  const iconImports = import.meta.glob('$lib/icons/*.svelte');
  
  let icons = [];

  async function loadIcons() {
    // 批量执行所有组件的导入操作
    const iconModules = await Promise.all(
      Object.values(iconImports).map(importFn => importFn())
    );
    // 提取每个组件的默认导出（Svelte组件以默认导出形式存在）
    icons = iconModules.map(module => module.default);
  }

  // 页面初始化时加载组件
  loadIcons();
</script>

{#each icons as Icon}
  <Icon class="w-8 h-8" />
{/each}

方式二：结合{#await}语法处理加载状态 #

<script lang="ts">
  const iconImports = import.meta.glob('$lib/icons/*.svelte');

  // 封装组件加载逻辑为Promise
  const iconsPromise = (async () => {
    // 遍历导入函数并批量加载
    const modules = await Promise.all(Object.values(iconImports).map(fn => fn()));
    // 提取组件默认导出
    return modules.map(m => m.default);
  })();
</script>

{#await iconsPromise}
  <p>组件加载中...</p>
{:then icons}
  {#each icons as Icon}
    <Icon class="w-8 h-8" />
  {/each}
{:catch err}
  <p>加载组件失败：{err.message}</p>
{/await}

关键问题说明 #

1. import.meta.glob的返回值：它返回的是一个对象，键是文件路径，值是对应的组件导入函数，并非直接的组件实例或Promise，所以不能直接用{#await}包裹。
2. 组件的导出形式：Svelte组件默认以default导出，所以需要从每个加载后的模块中提取default属性才能得到组件本身。
3. 路径适配：如果是普通Svelte项目而非SvelteKit，需将$lib/icons/*.svelte替换为相对路径，比如./icons/*.svelte。

可选优化：按文件名排序组件 #

如果需要按文件名顺序展示组件，可以在加载时对文件路径排序：

<script lang="ts">
  const iconImports = import.meta.glob('$lib/icons/*.svelte');

  const iconsPromise = (async () => {
    // 保留文件路径和导入函数的对应关系
    const entries = Object.entries(iconImports);
    // 按文件名排序
    entries.sort(([pathA], [pathB]) => pathA.localeCompare(pathB));
    
    const modules = await Promise.all(entries.map(([_, importFn]) => importFn()));
    return modules.map(m => m.default);
  })();
</script>

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