Glob 導入
Vite 支持使用特殊的 import.meta.glob 函數(shù)從文件系統(tǒng)導入多個模塊：
const modules = import.meta.glob('./src/*.js');
以上將會被轉(zhuǎn)譯為下面的樣子：
// vite 生成的代碼
const modules = {
'./src/foo.js': () => import('./src/foo.js'),
'./src/bar.js': () => import('./src/bar.js')
}
你可以遍歷 modules 對象的 key 值來訪問相應(yīng)的模塊：
Object.keys(modules).forEach(url => {
const li = document.createElement('li');
ul.appendChild(li);
const link = document.createElement('a');
li.appendChild(link);
const pathname = url.split('/').pop().split('.ts')[0];
link.href = `#${url}`
link.innerText = pathname;
link.addEventListener('click', () => location.hash = url);
})
匹配到的文件默認是懶加載的裙犹，通過動態(tài)導入實現(xiàn)碳却，并會在構(gòu)建時分離為獨立的 chunk井氢。
import.meta.globEager
如果你傾向于直接引入所有的模塊（例如依賴于這些模塊中的副作用首先被應(yīng)用），你可以使用 import.meta.globEager 代替:
const modules = import.meta.globEager('./src/*.js')
以上會被轉(zhuǎn)譯為下面的樣子：
// vite 生成的代碼
import * as __glob__0_0 from './src/foo.js'
import * as __glob__0_1 from './src/bar.js'
const modules = {
'./src/foo.js': __glob__0_0,
'./src/bar.js': __glob__0_1
}
請注意
- 這只是一個 Vite 獨有的功能而不是一個 Web 或 ES 標準
- 該 Glob 模式會被當成導入標識符：必須是相對路徑（以
./開頭）或絕對路徑（以/開頭，相對于項目根目錄解析）。 - Glob 匹配是使用
fast-glob來實現(xiàn)的 —— 閱讀它的文檔來查閱 支持的 Glob 模式。 - 你還需注意，glob 的導入不接受變量坏晦，你應(yīng)直接傳遞字符串模式。
- glob 模式不能包含與包裹引號相同的引號字符串（其中包括
'，"昆婿，```）球碉，例如，如果你想實現(xiàn)'/Tom\'s files/**'的效果仓蛆，請使用"/Tom's files/**"代替睁冬。
