vite glob-import
🥺目的: ファイル一括ロード
glob ディレクトリの中を import文羅列でimportしたくない😅
一括ロードしよう〜やり方😇
main.js
// main.js
const globModuels = import.meta.glob('./glob/*') // 全てを読み込む
console.log(globModuels)
ブラウザで確認
glob配下のファイルを読み込んだMap Objectが返されます。
forEachしてみる
Object.entries(globModuels).forEach(([k, v]) => {
console.log(k + ':', v)
})
これで利用できることではない
Moduleを取り出す
Object.entries(globModuels).forEach(([k, v]) => {
v().then((m) => console.log(k + ':', m.default))
})
- v を実行して、非同期処理
- 戻り値の m は本当の Module になります
どんな時に使う：
- 多種言語jsonファイルの読み込み?
ディレクトリのとある種類ファイル
js ファイルのみ読み込み
// 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 を使い便利になりますね！
これはこちらのライブラリによる機能：
https://github.com/mrmlnc/fast-glob
気になった方はぜひ本家を見てみてください😸