Bunを使用していろいろなFWを作成してみる（Next.js, Nuxt.js, Astro）
Bunのv1がアップデートされたので、各種FWでどのように使うことができるのかいろいろと調べてみた内容になります。
今回使用したバージョン
- bun: 1.0.11
- Next.js: 14.0.2
- Nuxt.js: 3.8.1
- Astro: 3.5.3
Bunとは
Bun is an all-in-one toolkit for JavaScript and TypeScript apps. It ships as a single executable called bun. At its core is the Bun runtime, a fast JavaScript runtime designed as a drop-in replacement for Node.js. It's written in Zig and powered by JavaScriptCore under the hood, dramatically reducing startup times and memory usage.
DeepLでの翻訳ですが、日本語訳はこちらになります。
BunはJavaScriptとTypeScriptアプリのためのオールインワンのツールキットです。bunという単一の実行ファイルとして出荷される。 核となるのはBunランタイムで、Node.jsのドロップイン置き換えとして設計された高速なJavaScriptランタイムだ。Zigで記述され、JavaScriptCoreで動作するため、起動時間とメモリ使用量が劇的に削減される。
各種FWで検証する前に
Bunのインストール
以下のコマンドを実行して動いていれば完了です。
$ bun --version 1.0.11
Homebrewの場合
$ brew tap oven-sh/bun # for macOS and Linux
$ brew install bun
npmの場合
$ npm install -g bun # the last `npm` command you'll ever need
各種FWで検証をしてみる
今回検証をする内容以外にもいろいろなものがあるため、ぜひみてみてください。
1. Next.jsを作成してみる
以下のように設定しました
❯ bun create next-app ✔ What is your project named? … next-bun ✔ Would you like to use TypeScript? … No / Yes ✔ Would you like to use ESLint? … No / Yes ✔ Would you like to use Tailwind CSS? … No / Yes ✔ Would you like to use `src/` directory? … No / Yes ✔ Would you like to use App Router? (recommended) … No / Yes ✔ Would you like to customize the default import alias (@/*)? … No / Yes ✔ What import alias would you like configured? … ~/src/* Creating a new Next.js app in /code/bun-sample/next-bun. Using bun. Initializing project with template: app Installing dependencies: - react - react-dom - next Installing devDependencies: - typescript - @types/node - @types/react - @types/react-dom - eslint - eslint-config-next bun install v1.0.11 (f7f6233e) + @types/node@20.9.0 + @types/react@18.2.37 + @types/react-dom@18.2.15 + eslint@8.53.0 + eslint-config-next@14.0.2 + typescript@5.2.2 + next@14.0.2 + react@18.2.0 + react-dom@18.2.0 276 packages installed [256.00ms] Initialized a git repository. Success! Created next-bun at /code/bun-sample/next-bun
bun devでページを開くことができます。
❯ bun dev $ next dev ▲ Next.js 14.0.2 - Local: http://localhost:3000 (node:80104) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time (Use `node --trace-warnings ...` to show where the warning was created) ✓ Ready in 2.9s ○ Compiling / ... ✓ Compiled / in 2s (517 modules) ○ Compiling /favicon.ico ... ✓ Compiled /favicon.ico in 1070ms (513 modules)
http://localhost:3000でページを開くことができます。
2. Nuxt.jsを作成してみる
以下のように設定しました。
❯ bunx nuxi init nuxt-bun # nuxt-bunはアプリ名 # 最初にどのパッケージを使用するかが出てくるため、bunを選択 ❯ Which package manager would you like to use? ○ npm ○ pnpm ○ yarn ● bun ✔ Which package manager would you like to use? bun ◐ Installing dependencies... bun install v1.0.11 (f7f6233e) + @nuxt/devtools@1.0.2 + nuxt@3.8.1 + vue@3.3.8 + vue-router@4.2.5 ✔ Types generated in .nuxt 671 packages installed [1.88s] ✔ Installation completed. ✔ Initialize git repository? Yes ℹ Initializing git repository... hint: Using 'master' as the name for the initial branch. This default branch name hint: is subject to change. To configure the initial branch name to use in all hint: of your new repositories, which will suppress this warning, call: hint: hint: git config --global init.defaultBranch <name> hint: hint: Names commonly chosen instead of 'master' are 'main', 'trunk' and hint: 'development'. The just-created branch can be renamed via this command: hint: hint: git branch -m <name> Initialized empty Git repository in /code/bun-sample/nuxt-bun/.git/ ✨ Nuxt project has been created with the v3 template. Next steps: › cd nuxt-bun › Start development server with bun run dev
bun devでページを開くことができます。
❯ bun dev $ nuxt dev Nuxt 3.8.1 with Nitro 2.7.2 ➜ Local: http://localhost:3000/ ➜ Network: use --host to expose ➜ DevTools: press Shift + Option + D in the browser (v1.0.2) ℹ Vite server warmed up in 800ms ℹ Vite client warmed up in 996ms [nitro] ✔ Nitro built in 313 ms (node:81016) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time (Use `node --trace-warnings ...` to show where the warning was created)
http://localhost:3000でページを開くことができます。
3. Astroを作成してみる
以下のように設定しました。
❯ bun create astro (node:81217) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time (Use `node --trace-warnings ...` to show where the warning was created) astro Launch sequence initiated. dir Where should we create your new project? ./astro-bun tmpl How would you like to start your new project? Include sample files ██████ Template copying... deps Install dependencies? Yes ██████ Installing dependencies with bun... ts Do you plan to write TypeScript? Yes use How strict should TypeScript be? Strict ██████ TypeScript customizing... git Initialize a new git repository? Yes ██████ Git initializing... next Liftoff confirmed. Explore your project! Enter your project directory using cd ./astro-bun Run bun run dev to start the dev server. CTRL+C to stop. Add frameworks like react or tailwind using astro add. Stuck? Join us at https://astro.build/chat ╭─────╮ Houston: │ ◠ ◡ ◠ Good luck out there, astronaut! 🚀 ╰─────╯
bun devでページを開くことができます。
❯ bun dev
$ astro dev
◆ Astro collects completely anonymous usage data.
This optional program helps shape our roadmap.
Run `npm run astro telemetry disable` to opt-out.
Details: https://astro.build/telemetry
🚀 astro v3.5.3 started in 66ms
┃ Local http://localhost:4321/
┃ Network use --host to expose
http://localhost:4321でページを開くことができます。
