vite中的glob-import批量导入的实现

在 Vite 中，批量导入文件的最佳实践是使用 glob导入特性。这个特性可以在一行代码中导入多个文件，而不需要为每个文件编写独立的导入语句。

一般的使用场景是，当文件过多或者需要动态导入模块时，我们需要手动一个个去 import，但是使用 glob-import 就可以避免这种情况了，大大提高了开发效率。

Vite 是使用 ES 模块语法进行编程的新型前端构建工具，对于ES 模块的glob 导入提供了原生支持。

假设有以下目录结构：

components/
 ├── Foo.vue
 ├── Bar.vue
 └── Baz.vue

你可以使用 glob 导入一次性导入所有组件：

Vite中的 import.meta.glob 和 import.meta.globEager 是两个用于模块映射和批量导入的方法。

这两者与webpack中的 require.context 功能相似，但更具灵活性，可以有效的实现在Vue中动态导入组件。

两者的主要区别在于加载方式：import.meta.glob 是异步加载，返回的是一个包含路径和返回Promise的对象，需要在需要时调用；而 import.meta.globEager 是同步加载，返回的是一个包含路径和模块内容的对象，适合于模块较少的情况。

两者的基本用途都是批量导入模块，不过import.meta.glob返回的是一个由模块路径和模块异步导入函数构成的键值对对象，而import.meta.globEager返回的是一个由模块路径和模块导出值构成的键值对对象。

首先，列出vite中文档对于这两个函数的定义：

• import.meta.glob: 一个返回由Promise异步引入的键值对对象（相对于当前模块的相对路径 -> 该模块的异步导入函数）。
• import.meta.globEager: 一个返回由同步引入的键值对对象（相对于当前模坐的相对路径 -> 该模块的导出对象）。

接下来，通过以下例子一一说明这两者的应用场景和用法。

首先是 import.meta.glob：

// 使用 import.meta.glob 导入所有 Vue 组件
let globModules= import.meta.glob('./components/*.vue')
console.log(globModules)
// 导入结果是一个对象，键为文件相对路径，值为返回模块Promise 的函数
// {
//   './components/Foo.vue': () => Promise<{ default: object }>,
//   './components/Bar.vue': () => Promise<{ default: object }>,
//   './components/Baz.vue': () => Promise<{ default: object }>
// }
Object.entries(globModules).forEach(([path, globModule]) => {
    console.log(path, globModule)
    globModule().then((mod) => {
        console.log(path + '模块内容', mod.default)
    })
})
// `import.meta.glob` 是异步加载，适合于模块较多或者模块较大的情况
// 当调用该函数并await得到的时候，会返回模块的内容

接下来看 import.meta.globEager：

// 使用 import.meta.globEager 同步导入所有 Vue 组件
let globModules= import.meta.globEager('./components/*.vue')
console.log(globModules)
// 导入结果是一个对象，键为文件相对路径，值为模块对象
// {
//   './components/Foo.vue': {default: object},
//   './components/Bar.vue': {default: object},
//   './components/Baz.vue': {default: object}
// }
Object.entries(globModules).forEach(([path, globModule]) => {
    console.log(path + '模块内容', globModule.default)
})
// `import.meta.globEager` 是同步加载，适合于模块较少或者模块较小的情况
// 导入后可以直接获取到模块的内容

值得注意的是，对于Vue组件，模块内容都是在default中，所以访问时需要加上.default。

其中import.meta.glob可用于代码分割或者基于用户交互的延迟加载，而import.meta.globEager适合于模块较小，希望立即加载，并且不会由于尺寸过大而影响应用性能的情况。

使用 Vite 的 glob 导入，可以完成模块引用的实时更新，以及开发服务器的热更新。

注意事项：

• glob 导入只能在模块顶级使用，并且无法在动态条件或嵌套作用域内部动态调用。
• import.meta.glob在生产环境构建时将被静态地分析并构建成单独的模块。
• 引入的路径必须是相对路径(例如，import.meta.glob(‘./dir/.vue’))，不能是绝对路径（例如，import.meta.glob('/dir/.vue’)）。因为绝对路径在不同的操作系统上的文件路径可能不同。

到此这篇关于vite中的glob-import批量导入的实现的文章就介绍到这了,更多相关vite glob-import批量导入内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论