svelte+vite使用import.meta.glob

---

前言

在svelte+vite搭建的项目中，使用vite的import.meta.glob来实现动态注册模块路由。项目中使用的路由为svelte-spa-router。

svelte-spa-router具体用法请看https://github.com/ItalyPaleAle/svelte-spa-router

该项目使用js语言，使用ts语言的伙伴请参考，同时该文章也参考了以下文章https://blog.csdn.net/QQ_Empire/article/details/126308587

---

一、官方文档

https://cn.vitejs.dev/guide/features.html#glob-import

二、使用步骤

1.模块结构

一个文件夹代表一个模块，模块中的js文件为当前模块的路由配置，svelte文件为当前模块的页面。index.js中使用import.meta.glob。

---

2.模块中的路由文件

以上图的chat.js为例

import chatSvelte from "./chat.svelte";
const routes = {
    '/chat/:uid/:username': chatSvelte,

}
export default routes;

---

3.使用import.meta.glob

const metaRouters = import.meta.glob("./modules/**/*.js", {
    eager: true
});
export const routerArray = [];
let routes = {};
Object.keys(metaRouters).forEach((item) => {
    Object.keys(metaRouters[item]).forEach(key => {
        routerArray.push(metaRouters[item][key])
        routes = Object.assign(metaRouters[item][key],routes)
    })
});
export default routes;

---

4. 打印routes

---

5.在app.svelte中引入routes

<script>
  import Router from "svelte-spa-router";
  import routes from "./routes/index";
</script>

<main>
  <Router {routes} />
</main>

---

总结

记录一下如何解析import.meta.glob所获取的数据