AstroでBunを使う

BunはオールインワンのJavaScriptランタイム＆ツールキットです。詳しくはBunのドキュメントを参照してください。

:::cautionBunをAstroと一緒に使うと、荒削りな部分が見えてくるかもしれません。いくつかのインテグレーションは期待通りに動作しないかもしれません。詳しくはBunのAstroとの連携に関する公式ドキュメントを参照してください。

Bunを使用していて何か問題がある場合は、GitHubのBunのリポジトリに直接Issueを開いてください。:::

前提条件

あなたのマシンにローカルにBunがインストールされていること。Bunの公式ドキュメントのインストール手順を参照してください。

Bunで新しいAstroプロジェクトを作成する

以下のcreate-astroコマンドを使用して、Bunで新しいAstroプロジェクトを作成します。

bun create astro my-astro-project-using-bun

依存関係のインストール

CLIウィザードで"Install dependencies?"のステップを飛ばした場合は、依存関係をインストールしてから続行してください。

bun install

型の追加

Bunは@types/bunパッケージを公開しており、Bunのランタイム型が含まれています。

以下のコマンドを使って@types/bunをインストールしてください。

bun add -d @types/bun

CLIのインストールフラグ

Astroインテグレーションを使う

astro addコマンドにより、Astroの公式インテグレーションも使えます。

bun astro add react

テーマやスターターテンプレートを使う

create astroコマンドに--template引数を渡すことで、公式サンプルや任意のGitHubリポジトリのmainブランチをもとに新しいAstroプロジェクトを作成できます。

ターミナルで以下のコマンドを実行してください。公式のAstroスターターテンプレート名、または使用したいテーマのGitHubユーザー名とリポジトリ名に置き換えてください。

# 公式サンプルで新しいプロジェクトを作成
bun create astro@latest --template <example-name>
# GitHubリポジトリのmainブランチをもとに新しいプロジェクトを作成
bun create astro@latest --template <github-username>/<github-repo>

開発とビルド

開発サーバーを起動するには、以下のコマンドを使用します。

bun run dev

サイトのビルドとプレビュー

サイトをビルドするには、以下のコマンドを使用します。

bun run build

ビルドが完了したら、ターミナルで適切なプレビューコマンド（例: bun run preview）を実行すると、ビルドされたサイトをローカルのブラウザプレビューウィンドウで確認できます。

テスト

Bunには、bun testコマンドによる高速で組み込みのJest互換テストランナーが付属しています。その他のAstro用テストツールも使用できます。

公式リソース

AstroとBunでアプリを作る

コミュニティー・リソース

AstroでBunを使っていますか？このページにブログ記事やビデオを追加してください！

BunをAstroとCloudflare Pagesで使う - ブログ記事

貢献するコミュニティスポンサー