在 Vite 中，批量導(dǎo)入文件的最佳實(shí)踐是使用 glob導(dǎo)入特性。這個(gè)特性可以在一行代碼中導(dǎo)入多個(gè)文件，而不需要為每個(gè)文件編寫(xiě)?yīng)毩⒌膶?dǎo)入語(yǔ)句。

一般的使用場(chǎng)景是，當(dāng)文件過(guò)多或者需要?jiǎng)討B(tài)導(dǎo)入模塊時(shí)，我們需要手動(dòng)一個(gè)個(gè)去 import，但是使用 glob-import 就可以避免這種情況了，大大提高了開(kāi)發(fā)效率。

Vite 是使用 ES 模塊語(yǔ)法進(jìn)行編程的新型前端構(gòu)建工具，對(duì)于ES 模塊的glob 導(dǎo)入提供了原生支持。

假設(shè)有以下目錄結(jié)構(gòu)：

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

你可以使用 glob 導(dǎo)入一次性導(dǎo)入所有組件：

Vite中的 import.meta.glob 和 import.meta.globEager 是兩個(gè)用于模塊映射和批量導(dǎo)入的方法。

這兩者與webpack中的 require.context 功能相似，但更具靈活性，可以有效的實(shí)現(xiàn)在Vue中動(dòng)態(tài)導(dǎo)入組件。

兩者的主要區(qū)別在于加載方式：import.meta.glob 是異步加載，返回的是一個(gè)包含路徑和返回Promise的對(duì)象，需要在需要時(shí)調(diào)用；而 import.meta.globEager 是同步加載，返回的是一個(gè)包含路徑和模塊內(nèi)容的對(duì)象，適合于模塊較少的情況。

兩者的基本用途都是批量導(dǎo)入模塊，不過(guò)import.meta.glob返回的是一個(gè)由模塊路徑和模塊異步導(dǎo)入函數(shù)構(gòu)成的鍵值對(duì)對(duì)象，而import.meta.globEager返回的是一個(gè)由模塊路徑和模塊導(dǎo)出值構(gòu)成的鍵值對(duì)對(duì)象。

首先，列出vite中文檔對(duì)于這兩個(gè)函數(shù)的定義：

• import.meta.glob: 一個(gè)返回由Promise異步引入的鍵值對(duì)對(duì)象（相對(duì)于當(dāng)前模塊的相對(duì)路徑 -> 該模塊的異步導(dǎo)入函數(shù)）。
• import.meta.globEager: 一個(gè)返回由同步引入的鍵值對(duì)對(duì)象（相對(duì)于當(dāng)前模坐的相對(duì)路徑 -> 該模塊的導(dǎo)出對(duì)象）。

接下來(lái)，通過(guò)以下例子一一說(shuō)明這兩者的應(yīng)用場(chǎng)景和用法。

首先是 import.meta.glob：

// 使用 import.meta.glob 導(dǎo)入所有 Vue 組件
let globModules= import.meta.glob('./components/*.vue')
console.log(globModules)
// 導(dǎo)入結(jié)果是一個(gè)對(duì)象，鍵為文件相對(duì)路徑，值為返回模塊Promise 的函數(shù)
// {
//   './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 + '模塊內(nèi)容', mod.default)
    })
})
// `import.meta.glob` 是異步加載，適合于模塊較多或者模塊較大的情況
// 當(dāng)調(diào)用該函數(shù)并await得到的時(shí)候，會(huì)返回模塊的內(nèi)容

接下來(lái)看 import.meta.globEager：

// 使用 import.meta.globEager 同步導(dǎo)入所有 Vue 組件
let globModules= import.meta.globEager('./components/*.vue')
console.log(globModules)
// 導(dǎo)入結(jié)果是一個(gè)對(duì)象，鍵為文件相對(duì)路徑，值為模塊對(duì)象
// {
// ? './components/Foo.vue': {default: object},
// ? './components/Bar.vue': {default: object},
// ? './components/Baz.vue': {default: object}
// }
Object.entries(globModules).forEach(([path, globModule]) => {
? ? console.log(path + '模塊內(nèi)容', globModule.default)
})
// `import.meta.globEager` 是同步加載，適合于模塊較少或者模塊較小的情況
// 導(dǎo)入后可以直接獲取到模塊的內(nèi)容

值得注意的是，對(duì)于Vue組件，模塊內(nèi)容都是在default中，所以訪問(wèn)時(shí)需要加上.default。

其中import.meta.glob可用于代碼分割或者基于用戶交互的延遲加載，而import.meta.globEager適合于模塊較小，希望立即加載，并且不會(huì)由于尺寸過(guò)大而影響應(yīng)用性能的情況。

使用 Vite 的 glob 導(dǎo)入，可以完成模塊引用的實(shí)時(shí)更新，以及開(kāi)發(fā)服務(wù)器的熱更新。

注意事項(xiàng)：

• glob 導(dǎo)入只能在模塊頂級(jí)使用，并且無(wú)法在動(dòng)態(tài)條件或嵌套作用域內(nèi)部動(dòng)態(tài)調(diào)用。
• import.meta.glob在生產(chǎn)環(huán)境構(gòu)建時(shí)將被靜態(tài)地分析并構(gòu)建成單獨(dú)的模塊。
• 引入的路徑必須是相對(duì)路徑(例如，import.meta.glob(‘./dir/.vue’))，不能是絕對(duì)路徑（例如，import.meta.glob('/dir/.vue’)）。因?yàn)榻^對(duì)路徑在不同的操作系統(tǒng)上的文件路徑可能不同。

到此這篇關(guān)于vite中的glob-import批量導(dǎo)入的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vite glob-import批量導(dǎo)入內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論