bun + Vite + Elm で環境構築
1. bun の公式ドキュメントに沿って、bun create vite my-app --template vanilla-ts を実行する 全部型付けで統一したいじゃん radish-miyazaki.icon
2. cd my-app && bun i && bun run dev でサーバが立ち上がることを確認
3. bun i -d vite-plugin-elm で Elm 用のプラグインを追加
4. vite.config.ts を作成し、以下のように記述
code:vite.config.ts
import { defineConfig } from "vite";
import elm from "vite-plugin-elm";
export default defineConfig({
});
5. src 内の main.ts 以外のファイルをすべて削除し、main.ts も以下のように書き換える
必要ならば取っておいても 🙆
code:main.ts
import { Elm } from "./Main.elm";
Elm.Main.init({
node: document.getElementById("app"),
});
IDE 上だと、from "./Main.elm" なんか見つからないよ！って怒られる。
このままだとビルド出来ないので、即席の型ファイルを用意する
code:Main.elm.d.ts
export var Elm: any;
これでビルド可能に（IDE 上は怒られ続ける）
6. src/Main.elm を作成する
ここでは必要最低限
code:Main.elm
module Main exposing (main)
import Html
main = Html.text "Hello, World!"
7. package.json の scripts の vite コマンドを bunx --bun vite に置き換える
node の代わりに bun を使ってコマンドを実行するように明示する
8. bun run dev や bun run build、bun run preview がそれぞれ動作するかチェックする
9. 🎉 Happy coding 🎉
補足
vite-elm-template 使うのもありか
bunx tiged lindsaykwardell/vite-elm-template my-elm-app
tiged は Git リポジトリの一部だけをコピーするコマンド テストランナーは note-test-runner か elm-test-rs か
参考