Zenn
Open6

Bunに入門してみる

Bun
kwstkwst

「Bunって何？名前はちょいちょい聞くけどNode.jsに置き換わるなにかなのか？」というレベルの人が入門して完全に理解するまでの道のりです。

kwstkwst

とりあえずインストール
https://bun.sh/docs/installation
色々インストール方法があるみたいですが、Homebrewで入れてみます。

brew tap oven-sh/bun
brew install bun

エラーが出た。。。

Error: Cannot install under Rosetta 2 in ARM default prefix (/opt/homebrew)!
To rerun under ARM use:
    arch -arm64 brew install ...
To install under x86_64, install Homebrew into /usr/local.
kwstkwst

ARMネイティブモードでbrewコマンドを実行します。

arch -arm64 brew install bun

無事インストールできました。

$ bun -v
1.0.3
kwstkwst

Quick Startに沿ってやってみます。
https://bun.sh/docs/quickstart

練習用ディレクトリを切ってVSCodeで起動します。

mkdir bun-quickstart
code bun-quickstart

プロジェクトを初期化します。

$ bun init
bun init helps you get started with a minimal project and tries to guess sensible defaults. Press ^C anytime to quit

package name (bun-quickstart): 
entry point (index.ts): 

Done! A package.json file was saved in the current directory.
 + index.ts
 + .gitignore
 + tsconfig.json (for editor auto-complete)
 + README.md

To get started, run:
  bun run index.ts

プロジェクトが出来上がったので、言われた通りにTSファイルを実行してみます。

$ bun run index.ts 
Hello via Bun!

TSファイルが実行できました。

kwstkwst

次はNext.jsの開発環境を整えてみます。
https://bun.sh/guides/ecosystem/nextjs

プロジェクトの新規作成

bun create next-app
cd my-app

bunの環境で起動する場合は--bunをつけます。

bun --bun run dev

何もつけなければNode.jsの環境で起動します。

bun run dev

ビルドしてみます

bun --bun run build

エラーが出ました

> Export encountered errors on following paths:
        /_error: /404
        /_error: /500
        /_not-found
        /page: /
error: script "build" exited with code 1 (SIGHUP)

``
bun run buildだと通ったので次は起動してみます。

bun --bun run start

今度はこのようなエラーが出ました。

error: Invariant: Render expects to have requestAsyncStorage, none found
      at my-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:127:68806
      at J (my-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:127:68595)
      at my-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:127:83883
      at run (node:async_hooks:70:10)
      at wrap (my-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:125:43994)
      at my-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:127:83883
      at run (node:async_hooks:70:10)
      at wrap (my-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:125:43571)
      at nv (my-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:127:83795)
      at my-app/node_modules/next/dist/server/base-server.js:1293:31
      at doRender (my-app/node_modules/next/dist/server/base-server.js:1152:35)
      at my-app/node_modules/next/dist/server/base-server.js:1442:33
      at my-app/node_modules/next/dist/server/base-server.js:1360:76
      at my-app/node_modules/next/dist/server/response-cache/index.js:102:41
      at my-app/node_modules/next/dist/server/response-cache/index.js:76:19
      at get (my-app/node_modules/next/dist/server/response-cache/index.js:153:67)
      at my-app/node_modules/next/dist/server/base-server.js:1360:33
      at renderToResponseWithComponentsImpl (my-app/node_modules/next/dist/server/base-server.js:918:47)
      at my-app/node_modules/next/dist/server/base-server.js:902:192
      at renderToResponseWithComponents (my-app/node_modules/next/dist/server/base-server.js:901:41)
      at my-app/node_modules/next/dist/server/base-server.js:1850:29
      at processTicksAndRejections (:55:76)

ちょっと復旧の手立てが見つかっていません。。

kwstkwst

ビルド時間の比較 Yarn vs Bun

ついでに新規作成した状態でビルド時間を計測してみました。

$ time yarn build
...
yarn build  18.04s user 2.10s system 180% cpu 11.177 total

$ time bun  run build
...
bun run build  13.47s user 1.13s system 192% cpu 7.581 total

一応少し早くなりました。