🧄

BunでReactを動かしてみる

2023/10/13に公開

React

はじめに

LT会でBunについて登壇するときの備忘録です。

実行環境

Ubuntu 23.04

インストール

$ curl -fsSL https://bun.sh/install | bash
######################################################################## 100.0%
bun was installed successfully to ~/.bun/bin/bun 

Added "~/.bun/bin" to $PATH in "~/.bashrc" 

To get started, run: 

  source /home/nematatu/.bashrc 
  bun --help

インストールできたかと思いきや、

$ bun help
コマンド 'bun' が見つかりません。次の方法でインストールできます:
sudo snap install bun-js

となってしまった。

インストールしたときのログをよく見てみると、get startedするには
source /home/user/.bashrc bun --helpってやってね、とある。
実行して確認してみる。

bun
Bun: a fast JavaScript runtime, package manager, bundler and test runner. (1.0.6)

  run       ./my-script.ts       Run JavaScript with Bun, a package.json script, or a bin
  test                           Run unit tests with Bun
  x         next                 Install and execute a package bin (bunx)
  repl
  Start a REPL session with Bun
  ~~~(中略)~~~

出来た〜！

何で？

なんかデフォルトだとsnap/bin/bunで環境変数探して実行するっぽいんだけど、bunは.bashrcに環境変数保存してるからそりゃ出来ないよねって感じなのかな？
linuxの環境変数事情とか詳しくないので調べてちゃんとまとめます。

create-react-app

reactを追加！
npmみたいなパッケージマネージャとしての機能もあるのでbun addでインストールできる

$ bun add react
bun add v1.0.4 (745b6b94)

 installed react@18.2.0

reactではなくreact-appを使う

$ bun create react-app my-app

Creating a new React app in /home/nematatu/my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1459 packages in 2m

~~~(中略)~~~

Happy hacking!

my-appというReactのプロジェクトが出来た。
cd my-appで移動して、bun startすると

無事実行できた。
しかし、デフォルトのreact-appに関しては、速いと言ってもnpm startより少し速いかな？くらい。プロジェクトが大きくなることで威力を発揮するかもしれないので追記します。

おわりに

環境変数周りで少しゴタゴタしました。
色々遊んでみようと思います。

参考

https://bun.sh/