Svelte5でJSライブラリを作成する方法(素のJS向けにビルドする方法)

DRANK

まえがきなんのJSフレームワークも使っていない純粋な HTML, CSS, JS で構成されたプロジェクトに、リッチな機能を組み込みたい！みたいなときありますよね。そういうときにSvelteで実装するための備忘録です。ただSvelteが書きたいだけで細かい設定とかに頭使いたくないですよね。下準備セットアップコマンドを実行してセットアップする公式に書いてある通りにセットアップします。 のところは自由に変更しても良い。省略するとおそらく今のディレクトリに作られる。設定は Svelte library を選択。それ以外は好きなもので良い。(もしかしたら Svelte library じゃなくても良いかも)終わったら作ったディレクトリに移動するcd my-app で移動する。動くか確認するnpm run dev を実行し o + Enter でブラウザを開き Welcome to your library project みたいなページがブラウザで開けばOK。ライブラリにしたいコンポーネントを準備するsrc/lib/Main.svelte に以下のようなファイルを作る。src/lib/Main.svelte<script lang="ts"> let count = $state(0); </script> <button onclick={() => count++}>click {count}</button> <style> button { color: blue; } </style…