在 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’))。因为绝对路径在不同的操作系统上的文件路径可能不同。