ionicをWindowsで開発し LiveReloadを行う


ionicとは?

1つのソースで、Web、Android、iOS、Windowsネイティブ等の複数のアプリを生成するハイブリッドフレームワークです

ionicの特徴としては、Typescriptで記述し、Angular(React)フレームワークを使い、ネイティブ連携にCapacitor(Cordova)を使う事
つまり、HTML、CSS、JavaScriptというWebの資産が利用出来る事にあります

Vueも現在対応中とか!

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

Windowsとの相性

公式曰く

[https://ionicframework.com/docs/intro/environment:embed:cite]

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で開発してみた

[https://murasame-labo.hatenablog.com/entry/2020/08/24/021358?_ga=2.222892443.1813986843.1598932755-2137747772.1590882580:title]

先日記事にかいたが、とあるnodeのバージョンでは、起動時にエラーが出るという問題にピンポイントにぶつかったが

基本的には問題なく動いた

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

[https://github.com/microsoft/vscode-cordova/issues/495:title]

など、様々なページでWindowsだとLiveReloadが効かないという話が出ている

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

WSL2を使ってみた

公式からはサポートしないと言われているWSLを使ってみる

私はWSL2にしているので、WSL1はどうなるかわからない

まず、Windowsパス(/mnt/c の下)でionicを実行したが LiveReloadがされない

このパスはWSLからみるとCloud9でマウントされたネットワークドライブなので

挙動に問題があっても仕方がない

次に、Linuxパス(例えば ~/ の下) でionicを実行すると LiveReloadが実行された!!

しかも ionicは10秒で起動する

とても快適な環境が構築された!