前言

在 Vite 中有一個(gè)特殊的導(dǎo)入方式，即我們今天打算討論的 Glob 導(dǎo)入 。

這種導(dǎo)入彌補(bǔ)完善了 JavaScript 導(dǎo)入體系中不能同時(shí)導(dǎo)入到某個(gè)文件目錄的多個(gè)文件的缺陷。

一、快速入門

1.1 什么是 import.meta.glob

在 Vue3 和 Vite 的開發(fā)環(huán)境中， import.meta.glob() 是 Vite 提供的一個(gè)強(qiáng)大的模塊動(dòng)態(tài)導(dǎo)入功能，用于在構(gòu)建時(shí)批量導(dǎo)入模塊（如 Vue 文件、圖片、JSON 等），并生成按需加載的代碼。

Glob 導(dǎo)入可以導(dǎo)入目錄中的所有文件/目錄，也可以對(duì)文件/目錄進(jìn)行匹配篩選。

這在處理大量的文件，如組件、頁(yè)面或其他模塊時(shí)特別有用，特別是當(dāng)需要根據(jù)某些條件或模式來動(dòng)態(tài)加載它們時(shí)。

1.2 基本語(yǔ)法

const modules = import.meta.glob(
	pattern,          		// 匹配文件路徑的 glob 模式：字符串或字符串?dāng)?shù)組
    {						// 可選配置
    	eager?: boolean, 	// 是否同步導(dǎo)入
    	import?: string | string[], // 指定導(dǎo)入的內(nèi)容，例如：import: 'default'
    	query?: string｜Record<string, string | number | boolean> // 查詢參數(shù)
  }
);

• 所有 import.meta.glob 的參數(shù)都必須以字面量傳入，不可以在其中使用變量或表達(dá)式。
• 路徑相對(duì)于當(dāng)前文件，必須是相對(duì)路徑（以 ./ 開頭）或絕對(duì)路徑（以 / 開頭，相對(duì)于項(xiàng)目根目錄解析）或一個(gè)別名路徑。

二、核心功能

假設(shè)有一個(gè) src/views/DynamicComponents 目錄，里面包含多個(gè) Vue 組件。

若是根據(jù)某些條件動(dòng)態(tài)地導(dǎo)入這些組件，那么可以使用 import.meta.glob 來實(shí)現(xiàn)這個(gè)需求。

2.1 基本導(dǎo)入

這種導(dǎo)入是動(dòng)態(tài)導(dǎo)入，通過 glob 模式來匹配文件，默認(rèn)返回一個(gè)函數(shù)對(duì)象，對(duì)象的鍵是匹配到的文件路徑，值是 import() 函數(shù)，這個(gè)功能可以幫助我們實(shí)現(xiàn)模塊的按需加載。

// 使用 import.meta.glob 導(dǎo)入所有組件
const modules = import.meta.glob('/src/views/DynamicComponents/*.vue')

// 通過遍歷 modules 對(duì)象來動(dòng)態(tài)加載組件
for (const path in modules) {
  // 輸出模塊路徑
  console.log('模塊路徑：', path)
  console.log('文件名：', path.split("/src/views/DynamicComponents/")[1].split('.vue')[0])
  // 等待模塊加載完成，輸出模塊內(nèi)容
  await modules[path]().then((mod: any) => {
    console.log('模塊內(nèi)容：', mod.default); // 這里可以訪問到組件的默認(rèn)導(dǎo)出
  });
}

【說明】異步加載 - 代碼分割，按需加載。

2.2 同步導(dǎo)入

Glob 導(dǎo)入匹配到的文件默認(rèn)是懶加載的，若是想要直接引入所有的模塊，則需要借助 eager 選項(xiàng)， 當(dāng)設(shè)置為 true 時(shí)，它會(huì)立即導(dǎo)入所有匹配的模塊，而不是返回一個(gè) Promise，這在某些場(chǎng)景下可以提高性能。

const eagerModules = import.meta.glob('/src/views/DynamicComponents/*.vue', {eager: true})

for (const path in modules) {
  console.log(modules[path]); // 直接訪問模塊
}

【注意】同步加載 - 所有模塊打包在一起。

2.3 指定導(dǎo)入內(nèi)容

若是只想要導(dǎo)入模塊中的部分內(nèi)容，那么可以利用 import 選擇，其允許我們指定導(dǎo)入模塊的導(dǎo)出內(nèi)容。

const specificImports = import.meta.glob('./DynamicComponents/*.vue', {
  import: 'default', // 只導(dǎo)入默認(rèn)導(dǎo)出
  eager: true
})

const multipleImports = import.meta.glob('./DynamicComponents/*.vue', {
  import: ['default', 'setup'], // 導(dǎo)入多個(gè)指定內(nèi)容
  eager: true
})

自定義查詢

還可以使用 query 選項(xiàng)來提供對(duì)導(dǎo)入的自定義查詢，比如，可以將資源作為字符串引入或者作為 URL 引入。

// 作為 URL 導(dǎo)入
const imageUrls = import.meta.glob('./assets/*.png', {
  query: '?url'
})

// 作為原始文本導(dǎo)入
const rawContents = import.meta.glob('./files/*.md', {
  query: '?raw'
})

三、小結(jié)

import.meta.glob 是 Vite 的核心功能，用于高效處理模塊批量導(dǎo)入，它可以幫助我們實(shí)現(xiàn)模塊的按需加載。

通過 import.meta.glob，我們可以輕松地動(dòng)態(tài)導(dǎo)入模塊，并在 Vue3 項(xiàng)目中實(shí)現(xiàn)動(dòng)態(tài)路由、懶加載組件等功能。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論