使用場景：例如我們的項目中的 api接口是分模塊的，用戶相關的API接口封裝在 user.js里，權限相關的API接口封裝在 auth.js里，系統(tǒng)相關的API接口封裝在即 sys.js里，以后項目功能增加了，還會增加后續(xù)相關的各種模塊的js，如果我們在一個頁面中用到了很多模塊的接口，一個個導入是不是非常麻煩，這時候vite提供的 glob import就派上用場了。

1、例子

例如我們的項目中有這些api的js

這時候，我們如果想一次性全部引入這些js怎么辦呢？答案就是我們剛剛說的glob import。

• 代碼演示

const globModules =import.meta.glob('./api/*.js')
console.log(globModules)

• 輸出結果

  
  
• 我們可以看到，輸出了對應的js目錄及其要import的語句的{key，value}的對象,我們可以直接通過Object.entries拿到相應的key和value

Object.entries(globModules).forEach(
    ([k, v]) => {
        console.log(k + ':' + v)
    }
)

Object.entries(globModules).forEach(
    ([k, v]) => {
        v().then(m => {
            console.log(k + ':' + m.default)
        })
    }
)

2、引入文件格式篩選

我們在上面使用glob的使用是這樣的import.meta.glob('./api/*.js')
import.meta.glob('./api/支持vite規(guī)定的格式篩選.js')

• *.js：代表api目錄下所有的.js文件，例如還可以用*.json、*.ts，都是一個道理。
• *-[0-9].js：代表api目錄下所有以‘-’開頭+ 1到9數(shù)字的.js文件，例如就是api目錄下的test-1.js這個文件

還要很多類似于正則的規(guī)則，大家可以去看fast-glob的官網(wǎng)，vite里其實就是集成了fast-glob這個插件。

3、globEager的使用

vite會直接幫助我們導入對應的js

const globModules =import.meta.globEager('./api/*.js')

console.log(globModules)

我們可以看到，會打印出對應的js及其Module，然后我們在看vite編譯后的代碼

可以看到vite會直接幫我們導入對應的Module，不需要我們自己去執(zhí)行對應的函數(shù)了。

4、總結

glob import是vite自帶的語法功能，如果你的項目中用的是其他構建工具，例如webpack，是不能使用包含glob import功能的代碼的。所以大家要注意。