前回は、Monacaプロジェクトを理解するために、Monacaプロジェクトの構成について説明しました。今回は、前回説明したトランスパイルが必要なプロジェクトの設定や注意点について説明したいと思います。

今回も、前回の説明で使用した、下記のテンプレートプロジェクトを使用して説明していきます。

Onsen UI V2 Vue3 Minimum

トランスパイルの設定

テンプレートプロジェクトでのトランスパイルの処理には、Viteが利用されています。Viteでのトランスパイルの処理を実行する設定については、package.jsonのscriptsプロパティーに設定されています。

テンプレートプロジェクトのscriptsプロパティーには、以下のトランスパイルに関する設定が追加されています。

"scripts": {
  "monaca:preview": "npm run dev & npm run watch",
  "monaca:transpile": "npm run build",
  "monaca:debug": "npm run watch",
  "dev": "cross-env NODE_ENV=development vite",
  "watch": "cross-env NODE_ENV=development vite build --watch",
  "build": "cross-env NODE_ENV=production vite build"
},

上記のトランパイルの設定について、Monaca Localkit/Monaca CLIとMonacaクラウドIDEで、実行されるコマンドが異なります。

Monaca Localkit/Monaca CLI

Monaca LocalkitとMonaca CLIでテンプレートプロジェクトを開発している時には、scriptsプロパティーの下記のコマンドが実行されます。

monaca:debug

具体的には、Monaca Localkitの場合は、テンプレートプロジェクト作成時、または、テンプレートプロジェクトを開いた際に実行されます。Monaca CLIの場合は、monaca debugコマンドを実行した際に実行されます。

monaca:debugコマンドでは、viteのdevelopmentモードでトランスパイルが実行されているため、本番環境ではなく、開発環境でのトランスパイル処理が行われます。開発環境でのトランスパイルでは、HMR（Hot Module Replacement）が動作し、変更箇所のみが瞬時に反映されるため、開発速度を挙げることができます。

また、monaca:debugコマンドでは、vite buildコマンドのオプションとして--watchオプションが設定されているため、ソースコードを修正し、ファイルが保存されるとトランパイル処理が実行されるようになっています。

アプリのリリース時には、developmentモードではなく、productionモードでトランスパイルを行う必要があります。productionモードでは、HMRではなくビルド済みの静的ファイルが出力されます。

productionモードでトランスパイル処理を実行する場合は、以下のコマンドを実行する必要があります。

monaca:transpile

Monaca Localkitの場合は、リモートビルド実行時に、上記のコマンドが実行されます。Monaca CLIの場合は、monaca remote buildコマンド実行時に、上記のコマンドが実行されます。

MonacaクラウドIDE

MonacaクラウドIDEでテンプレートプロジェクトを開発している時には、scriptsプロパティーの下記のコマンドが実行されます。

monaca:preview

具体的には、MonacaクラウドIDEでテンプレートプロジェクトを開いた際に、プレビューサーバ内で実行されます。

monaca:previewコマンドの場合も、viteのdevelopmentモードでトランスパイルが実行されているため、本番環境ではなく、開発環境でのトランスパイル処理が行われます。そのため、Monaca Localkit/Monaca CLIと同様にHMRが動作します。また、monaca:previewコマンドでもvite buildコマンドのオプションとして--watchオプションが設定されているため、ソースコードを修正し、ファイルが保存されるとトランパイル処理が実行されるようになっています。

注意点1

MonacaクラウドIDEでトランスパイルが必要なプロジェクトを開発する場合には、注意が必要になります。MonacaクラウドIDEとMonacaデバッガー間では、ライブリロードがサポートされていません。そのため、MonacaデバッガーでMonacaクラウド上のトランスパイルが必要なプロジェクトを開いた際には、以下の警告が表示されます。

注意点2

Monaca LocalkitやMonaca CLIからproductionモードでトランスパイルが行われる仕様については、上記で説明しましたが、MonacaクラウドIDEの場合は、仕様上、自動でproductionモードでのトランスパイル処理を実行することができません。そのため、MonacaクラウドIDEでproductionモードでのトランスパイルを実行する場合は、スクリーンショットのように新規ターミナルを起動し、以下のコマンドを実行する必要があります。

npm run monaca:transpile

現状、トランスパイルが必要なプロジェクトの開発については、Monaca LocalkitまたはMonaca CLIの利用をおおすすめします。

おわりに

今回は、トランスパイルが必要なプロジェクトの設定や注意点について説明しました。次回からは、MonacaクラウドIDEのメニューからMonacaプロジェクトに設定される項目について説明していきたいと思います。

Monacaプロジェクトを理解しよう（設定編：トランスパイル）