【Bun】Windowsで肉まんを使ってみる

Bunとは

最近Node.jsだったりDenoだったりを調べていて、Youtubeでかわいい肉まんがロゴのBunというJavaScriptランタイムを見つけました。

Bunはバンドラー、トランスパイラ、パッケージマネージャが備わっているJavaScriptランタイムです。

Windowsで環境を構築

早速、Windows環境で環境を構築してみます。

実行環境は以下の通りです。

• Windows 10 / 11
• Ubuntu 20.04 / 22.04

1 WSLのインストール

以下のリンクを参考にWSLをインストールします。

wsl --install

上記のコマンドを管理者権限でコマンド入力をし、WSLをインストールします。
その後、PCを再起動するとWSLを実行できるようになります。

デフォルトでUbuntuがインストールされています。

次に、Ubuntuでユーザー名とパスワードの設定をします。

== 略 ==

Enter new UNIX username: _ユーザー名の設定_
New password: _パスワードの設定_
Retype new password: _パスワードの再入力_
passwd: password updated successfully
Installation successful!

== 略 ==

2 Bunのインストール

続いて、Bunのインストールをします。
インストールしたUbuntu上でおこないます。

まず、unzipが必要なのでインストールします。

sudo apt install unzip

次に以下のコマンドを入力してBunをインストールします。

curl https://bun.sh/install | bash

完了すると以下のような表示が出ます。

bun was installed successfully to /home/<ユーザー名>/.bun/bin/bun

Manually add the directory to your $HOME/.bashrc (or similar)

    export BUN_INSTALL="/home/<ユーザー名>/.bun" - ①
    export PATH="$BUN_INSTALL/bin:$PATH"       - ②

To get started, run

    bun --help 

上記にあるように$HOME/.bashrcのファイル内に①、②を追記します。

Ubuntu-18.04だとエラーが発生します。
Ubuntu-20.04以上のバージョンで再度、実行をしてみてください。

インストール後、一度Ubuntuを閉じて、再度開きます。

3 bun --helpの実行

再度開いたUbuntu上で以下のコマンドを実行します。

bun --help

問題なければ、以下のように出力されます。

    --use <STR>   ...

    == 略　（オプションのヘルプ表示） ==

-------

bun: a fast bundler, transpiler, JavaScript Runtime and package manager for web software.

  dev       ./a.ts ./b.jsx        Start a bun Dev Server
  bun       ./a.ts ./b.jsx        Bundle dependencies of input files into a .bun

  create    next ./app            Start a new project from a template (bun c)
  run       test                  Run JavaScript with bun, a package.json script, or a bin
  install                         Install dependencies for a package.json (bun i)
  add       @remix-run/dev        Add a dependency to package.json (bun a)
  remove    redux                 Remove a dependency from package.json (bun rm)

  upgrade                         Get the latest version of bun
  completions                     Install shell completions for tab-completion
  discord                         Open bun's Discord server
  help                            Print this help menu

ここまでできたら、Bunが使用可能になります。

まとめ

以上が簡単な環境構築フローです。

以下のリンクはドキュメントになっています(英語)。

「Table of Contents」の「Using bun with Create React App」を参照すると、簡単にReactのプロジェクトが作成できます。

ぜひ、試してみてください ^ ^