JavaScript 模塊是聲明性的讼载,模塊之間的關(guān)系是根據(jù)文件級別的導(dǎo)入和導(dǎo)出來指定的陶冷。模塊中聲明的變量、函數(shù)、類等在模塊外是不可見的模塊依賴于import和 export须妻。
這些基于JavaScript的導(dǎo)入方法用起來有一個(gè)缺點(diǎn)仔蝌,就是無法監(jiān)視目錄文件的變化。在開發(fā)中我們?nèi)绻軐⒁粋€(gè)目錄是為一個(gè)整體進(jìn)行導(dǎo)入荒吏,那么該目錄中的所有子目錄與文件就可以有層級的獲取敛惊,而不是一個(gè)一個(gè)寫在道路路徑里如'/modules/myModule.js'。
比如Python的著名重量型Web框架Dajngo绰更,其一個(gè)子應(yīng)用就是以一個(gè)目錄為整體的模塊進(jìn)行組織的瞧挤,這當(dāng)然要求一次能夠?qū)胍粋€(gè)目錄并能夠區(qū)分目錄中的層級。
Glob 導(dǎo)入即Vite中提供的 import.meta.glob() 和 import.meta.globEager() 導(dǎo)入函數(shù)儡湾。 Glob 導(dǎo)入可以導(dǎo)入目錄中的所有文件/目錄特恬,也可以對文件/目錄進(jìn)行匹配篩選。
會(huì)被當(dāng)成導(dǎo)入標(biāo)識符:必須是相對路徑(以 ./ 開頭)或絕對路徑(以 / 開頭徐钠,相對于項(xiàng)目根目錄解析)癌刽。
glob()懶加載方式,使用該導(dǎo)入丹皱,自然如果被導(dǎo)入的某個(gè)模塊中具體代碼有錯(cuò)誤頁不會(huì)被拋出妒穴。
{./test/b.ts: ?, ./test/c.ts: ?, ./test/d.ts: ?}
./test/b.ts: () => import("/src/test/b.ts")
./test/c.ts: () => import("/src/test/c.ts")
./test/d.ts: () => import("/src/test/d.ts?t=1639678566331")
globEager() 這種導(dǎo)入是靜態(tài)的,它將在你調(diào)用該函數(shù)時(shí)直接引入所有的模塊
import * as __glob__0_0 from './test/b.ts''
import * as __glob__0_1 from './test/c.ts''
import * as __glob__0_2 from './test/d.ts''
const modules = {
'./test/b.ts'': __glob__0_0,
'./test/c.ts'': __glob__0_1,
'./test/db.ts'': __glob__0_2,
}
特定文件類型導(dǎo)入
export const modules = import.meta.glob('./test/*.ts')