はじめに
Bun 1.0 がリリースされました。どうやら SvelteKit も動くらしいのです。
開発者体験がどのように変わるのか、簡単に確認してみました。
構成
以下のような構成でアプリを作成します。
使用したDocker イメージ: oven/bun
ソースコードの初期ディレクトリ構成。
[root]
|- .devcontainer
| |- devcontainer.json
.devcontainer/devcontainer.json
{
"name": "Bun",
"image": "oven/bun"
}
SvelteKit プロジェクトの作成
手順にならって SvelteKit のデモアプリを作成します。
root@cd61e9d1ac01:/workspaces/bun# bun create svelte@latest my-app
create-svelte version 5.0.6
┌ Welcome to SvelteKit!
│
◇ Which Svelte app template?
│ SvelteKit demo app
│
◇ Add type checking with TypeScript?
│ Yes, using JavaScript with JSDoc comments
│
◇ Select additional options (use arrow keys/space bar)
│ Add ESLint for code linting, Add Prettier for code formatting, Add Playwright for browser testing, Add Vitest for unit testing
│
└ Your project is ready!
✔ Type-checked JavaScript
https://www.typescriptlang.org/tsconfig#checkJs
✔ ESLint
https://github.com/sveltejs/eslint-plugin-svelte
✔ Prettier
https://prettier.io/docs/en/options.html
https://github.com/sveltejs/prettier-plugin-svelte#options
✔ Playwright
https://playwright.dev
✔ Vitest
https://vitest.dev
Install community-maintained integrations:
https://github.com/svelte-add/svelte-add
Next steps:
1: cd my-app
2: npm install (or pnpm install, etc)
3: git init && git add -A && git commit -m "Initial commit" (optional)
4: npm run dev -- --open
To close the dev server, hit Ctrl-C
Stuck? Visit us at https://svelte.dev/chat
パッケージのインストール
root@cd61e9d1ac01:/workspaces/bun# cd my-app
root@cd61e9d1ac01:/workspaces/bun/my-app# bun install
bun install v1.0.2 (37edd5a6)
+ @fontsource/fira-mono@4.5.10
+ @neoconfetti/svelte@1.0.0
+ @playwright/test@1.38.1
+ @sveltejs/adapter-auto@2.1.0
+ @sveltejs/kit@1.25.0
+ @types/cookie@0.5.2
+ eslint@8.49.0
+ eslint-config-prettier@8.10.0
+ eslint-plugin-svelte@2.33.2
+ prettier@2.8.8
+ prettier-plugin-svelte@2.10.1
+ svelte@4.2.1
+ svelte-check@3.5.2
+ typescript@5.2.2
+ vite@4.4.9
+ vitest@0.32.4
248 packages installed [63.67s]
SvelteKit のアプリを起動
ではアプリを起動してみます。ちゃんと動くでしょうか？
root@cd61e9d1ac01:/workspaces/bun/my-app# bun --bun run dev
$ vite dev
Forced re-optimization of dependencies
325 | family: isIPv6(address) ? "IPv6" : "IPv4",
326 | port: this.#server.port
327 | };
328 | }
329 |
330 | listen(port, host, backlog, onListen) {
^
error: Failed to start server. Is port 5173 in use?
at listen (node:http:330:16)
at processTicksAndRejections (:55:76)
VITE v4.4.9 ready in 1718 ms
➜ Network: use --host to expose
➜ press h to show help
エラーの回避策
host に 127.0.0.1 を指定したら動きました。
root@cd61e9d1ac01:/workspaces/bun/my-app# bun --bun run dev -- --host=127.0.0.1
$ vite dev --host=127.0.0.1
VITE v4.4.9 ready in 2121 ms
➜ Local: http://127.0.0.1:5173/
➜ press h to show help
アプリの動作確認
ブラウザでアクセスしてみたところ、問題なく動いてくれました。SVERDLE で遊ぶこともできました。
node_modules の再構築が爆速
Node.Js でフロントアプリを作成している場合良くあるのが、パッケージのインストール状態がおかしくなって、node_modules ディレクトリを再構築するケースです。
こんなコマンドを実行すると思います。
rm -rf node_modules
npm install
これをやるとかなり時間がかかっちゃうんですよね。
Bun だとどうでしょうか？
root@cd61e9d1ac01:/workspaces/bun/my-app# rm -rf node_modules/
root@cd61e9d1ac01:/workspaces/bun/my-app# bun install
bun install v1.0.2 (37edd5a6)
+ @playwright/test@1.38.0
+ @sveltejs/adapter-auto@2.1.0
+ @sveltejs/kit@1.25.0
+ eslint@8.49.0
+ eslint-config-prettier@8.10.0
+ eslint-plugin-svelte@2.33.2
+ prettier@2.8.8
+ prettier-plugin-svelte@2.10.1
+ svelte@4.2.0
+ svelte-check@3.5.2
+ typescript@5.2.2
+ vite@4.4.9
+ vitest@0.32.4
246 packages installed [549.00ms]
1秒もかかりませんでした
まとめ
Bun 1.0 で SvelteKit のデモアプリを動かすことができました。
- 良かった点
- node_modules の再構築が爆速。
これは開発者体験に影響が大きいのでは、と思います。
- node_modules の再構築が爆速。
- 悪かった点
- アプリ起動時に
hostの指定が必要。
npm はhost指定しなくても起動できるので、この人手間がちょっと気になりました。
ただ、package.jsonのdevスクリプトを"vite dev --host=127.0.0.1"のように修正すれば気になりません。 - アプリ起動時のコマンドがちょっと長い。
Bun で起動するためには--bunオプションが必要らしく（デフォルトだと Node.Js が使われるみたいです）、ちょっと手間ですね。
- アプリ起動時に
アプリの実行速度について、いまのところは大したことはやってないので Node.Js より速いという印象はありません。むしろ node_modules の再構築のような、開発者体験上での速度アップが期待できるのかなと思いました。