Astro.globが非推奨になったらしいので、import.meta.globを使う

2025-01-23

author kita

astro

要約

const allPosts = Astro.glob('../pages/posts/*.md');

の代わりに以下使う。

const pageMatches = import.meta.glob('../pages/posts/*.md', {eager:true} );
const allPosts = Object.values(pageMatches);

import.meta.globを使えと言われた

チュートリアルをやっていたらこんなことを言われました。 記事のリストを動的に表示する

Astro.glob is deprecated and will be removed in a future major version of Astro.
Use import.meta.glob instead: https://vitejs.dev/guide/features.html#glob-import

というので、import.meta.globで代替します。

import.meta.glob

viteに実装されている関数で、astroはviteをベースにしてるらしいです。 よく分からない。 [公式:Globのインポート]https://ja.vite.dev/guide/features.html#glob-%E3%81%AE%E3%82%A4%E3%83%B3%E3%83%9B%E3%82%9A%E3%83%BC%E3%83%88)

const modules = import.meta.glob('./dir/*.js')

は以下に変換される。

const modules = {
	'./dir/foo.js': () => import('./dir/foo.js'), 
	'./dir/bar.js': () => import('./dir/bar.js')
}

チュートリアルで同じように使ってみると、

const modules = import.meta.glob(`../pages/posts/*.md`);

console.logで表示してみました。

{
  './posts/post-1.md': [Function: ./posts/post-1.md],
  './posts/post-2.md': [Function: ./posts/post-2.md],
  './posts/post-3.md': [Function: ./posts/post-3.md],
  './posts/post-4.md': [Function: ./posts/post-4.md]
}

pathがkeyになって、valueがfunctionになってるのが返されてます。

実行方法が分からなかったので、chatgptに聞いたところ、

const allPosts = import.meta.glob<MarkdownInstance<Frontmatter>>('../pages/posts/*.md' );

for(const post of Object.values(allPosts)) {
    const moduleContent = await post();
    console.log(moduleContent);
}

functionなのでawaitで呼び出してあげる必要があるとのことでした。

eager:true

eager:trueをつけると、functionではなくobjectそのものになるみたいです。

なので、以下のようにすれば、markdownのfrontmatterが取得できます。

const allPosts = Object.values(import.meta.glob<MarkdownInstance<Frontmatter>>('../pages/posts/*.md', {eager:true}));

{allPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title} />)}

awaitを使わなくても良いらしいのが良いらしいですね。 該当するmodubleを全部読み込むということなので、markdownファイルが多い時などは不向きなのかもしれません。

おわりに

eager:trueを使うべきなんでしょうか。使わないべきなんでしょうか。この場合はどっち…。

参考