ionicをWindowsで開発し LiveReloadを行う

ionicとは？

1つのソースで、Web、Android、iOS、Windowsネイティブ等の複数のアプリを生成するハイブリッドフレームワークです
ionicの特徴としては、Typescriptで記述し、Angular(React)フレームワークを使い、ネイティブ連携にCapacitor(Cordova)を使う事 つまり、HTML、CSS、JavaScriptというWebの資産が利用出来る事にあります
Vueも現在対応中とか！

インストールもnpmで行います

Windowsとの相性

公式曰く

ionicframework.com

In general, we recommend using the built-in terminals. Many third-party terminals work well with Ionic, but may not be supported. For Windows, Command Prompt and PowerShell are supported. WSL is known to work with Ionic, but may not be supported. For macOS, the built-in Terminal app is supported. Git Bash (from git-scm.com) does not support TTY interactivity and is not supported by Ionic.

ビルトインのシェルを使ってくれ（Git bash等は対応していない）
WindowsはCommandPromptとPowerShellは対応している。WSLは動くらしいけどサポートはしないよ

まあ、iOSビルドもあるし、基本的にはMacで開発するのが当然のようだ

Windowsで開発してみた

ionicでserveすると [ERROR] ng has unexpectedly closed (exit code 127). - C++幼女 みやたけゆき
先日記事にかいたが、とあるnodeのバージョンでは、起動時にエラーが出るという問題にピンポイントにぶつかったが
基本的には問題なく動いた

が、ライブリロードが効かないのである！！

Ionic live reload not working. · Issue #495 · microsoft/vscode-cordova · GitHub
など、様々なページでWindowsだとLiveReloadが効かないという話が出ている

ionicの起動はお世辞にも速いといえない（私のMBPで30秒かかる）ので、これは何とかしたいものだ・・

WSL2を使ってみた

公式からはサポートしないと言われているWSLを使ってみる
私はWSL2にしているので、WSL1はどうなるかわからない

まず、Windowsパス（/mnt/c の下）でionicを実行したが LiveReloadがされない
このパスはWSLからみるとCloud9でマウントされたネットワークドライブなので
挙動に問題があっても仕方がない

次に、Linuxパス(例えば ~/ の下) でionicを実行すると LiveReloadが実行された！！
しかも ionicは10秒で起動する
とても快適な環境が構築された！