svelte+vite使用import.meta.glob

import.meta.glob是一个在Vite中使用的特性，它允许你使用模式匹配来导入文件。在Svelte+Vite项目中，你可以使用import.meta.glob来导入多个Svelte组件。

以下是一个简单的例子，展示了如何在Svelte组件中使用import.meta.glob来动态导入同一目录下的所有Svelte组件：

<script>
  // 使用import.meta.glob来匹配同一目录下所有的.svelte文件
  const modules = import.meta.glob('./*.svelte');
 
  // 动态导入的组件存储在modules对象中，键是相对路径+文件名，值是对应的Svelte组件
  const components = Object.keys(modules).reduce((acc, key) => {
    // 通常情况下，`key`是类似'./ComponentName.svelte'这样的字符串
    // 我们只需要文件名部分，所以去掉'./'和'.svelte'
    const componentName = key.replace(/^\.\//, '').replace('.svelte', '');
    acc[componentName] = modules[key].default;
    return acc;
  }, {});
</script>
 
<div>
  {#each Object.keys(components) as componentName}
    <svelte:component this={components[componentName]} />
  {/each}
</div>

在这个例子中，我们使用import.meta.glob来获取当前目录下所有.svelte文件的模块，并通过一个简单的reduce函数来处理这些模块，最终得到一个对象components，它的键是组件名称，值是对应的Svelte组件。然后，我们使用{#each}指令来迭代这个对象，并动态地渲染每一个Svelte组件。