vite基础知识-使用 Glob 动态加载文件

# 前言

开发基于 Vite + Vue3 的组件库，多个 .vue 文件需要动态加载！
注意 import.meta.globEager 已经弃用，请使用 import.meta.glob 来代替！

# 使用 Glob

# 异步方式

• 代码第 1 行，注意使用两个 **，匹配当前目录及其嵌套的全部子目录下的文件；
• 代码第 4 行，异步使用 Promise 加载，所以要在 then 中获取真正的组件对象；

const modules = import.meta.glob('./src/components/**/*.vue');

for (const path in modules) {

    modules[path]().then((mod) => {

        console.log(path, mod.default);

    })

}

# 同步方式

• 代码第 1 行，相较于异步，同步方式多了配置参数 { eager: true } ；
• 代码第 1 行，注意使用两个 **，匹配当前目录及其嵌套的全部子目录下的文件；
• 代码第 4 行，同步加载不需要 Promise 处理；

const modules = import.meta.glob('./src/components/**/*.vue', { eager: true });

for (const path in modules) {

    console.log(path, modules[path].default);

}

# 扩展知识

glob 是基于插件 fast-glob 实现的。官网介绍如下：

It’s a very fast and efficient glob library for Node.js.
这是一个基于 node.js 且非常高效的全局库。

一个 *：匹配当前目录下的文件；
两个 *：匹配当前目录及其嵌套的全部子目录下的文件；
​

# 最后

正在学习 Vite ，更多知识点详见官网 《功能 - Glob 导入》