Svelteでウェブアプリをサクッと作ってみようと思ったので、ファイルの置き場所とかある程度決めてくれているSapperフレームワークを使おうとふと思った。
とりあえず公式サイトにあるやり方でサクッとSapperを導入してみる。
導入時のバージョンは Svelte: 3.12.1,Sapper: 0.27.9 。
$ npx degit "sveltejs/sapper-template#webpack" my-app
$ cd my-app
$ yarn
$ yarn dev & open http://localhost:3000
動いた。
デモページに Try editing this file (src/routes/index.svelte) to test live reloading. と書いてあるので、
その説明文を Hallo Svelte World! にでも書き換えて保存してみる。
... が、なぜかブラウザが自動更新してくれない。
ちょっと調べてみたら、どうもWebpackのHot Module ReloadingにSvelteが対応しきれてないっぽい。
Sapper側でも自動読み込みライブラリを用意しているため、
Webpackの自動読み込みをオフにして、そちらを利用してやればいいとのこと。
package.jsonを開いてscriptsの中のdev:プロパティを以下のように書き換えてやる。
"dev": "sapper dev --no-hot"
または
"dev": "sapper dev --hot=false"
このコマンドで起動した後にindex.svelteファイルの文章を書き換えてみる。
無事に自動更新で文字が切り替わってくれた。