vite glob-import

🥺目的: ファイル一括ロード

glob ディレクトリの中を `import`文羅列でimportしたくない😅

main.js

// main.js
const globModuels = import.meta.glob('./glob/*')　// 全てを読み込む

console.log(globModuels)

glob配下のファイルを読み込んだMap Objectが返されます。

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

これで利用できることではない

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

// main.js
const globModuels = import.meta.glob('./glob/*.js')　// jsのみ読み込む

console.log(globModuels)

// main.js
const globModuels = import.meta.glob('./glob/*[0-9].js')  // jsのみかつ数字が末尾

console.log(globModuels)

この機能はesの機能ではなく、viteの機能

importのpathはコンパイルされます。

上記の書き方を書いても、別のコンパイラーはエラーになる可能性はあります。

import.meta.globEagerを使いましょ

// main.js
const globModuels = import.meta.globEager('./glob/*')

console.log(globModuels)

全部 Module に

コンパイル結果：

import.meta.globEager を使い便利になりますね！

これはこちらのライブラリによる機能：

気になった方はぜひ本家を見てみてください😸