クラウドIDE プレビュー機能の設定
プレビュー機能を利用するには、プロジェクトの package.json
ファイルに、次の設定が必要となります。
monaca:preview
コマンドMonaca クラウドIDEは、プレビュー機能に必要となる開発サーバーを起動させるため
monaca:preview
コマンドを実行します。
開発用サーバーの接続ポートを「8080」に指定
起動した開発用サーバーは、ポート番号「8080」でリッスンします。
Monaca以外のサービスや開発ツールで作成されたプロジェクトは、上記の設定によりプレビュー機能をご利用いただけます。
トランスパイルを利用しないプロジェクト
トランスパイルを利用しないプロジェクトは、package.json
ファイルの script
プロパティとdevDependencies
プロパティを次のように設定します。開発用サーバーは、BrowserSyncを利用して起動しています。
scriptプロパティ
scriptプロパティへmonaca:preview
コマンドとdev
コマンドを追加します。
"scripts": {
・・・
"monaca:preview": "npm run dev",
"dev": "browser-sync start -s www/ --watch --port 8080"
・・・
}
devDependencies
devDependencies
プロパティへbrowser-sync
モジュールを追加します。
"devDependencies": {
"browser-sync": "~2.27.7"
}
最新のMonacaプロジェクト(Cordova12)において、browser-sync
は上記のバージョンを指定します。
トランスパイルを利用するプロジェクト
VueやReact、Angularなどのトランスパイルを利用するプロジェクトは、monaca:preview
コマンド内に開発用サーバーを起動する処理を登録します。
また、ソースコードの変更時に自動的にビルドを実行させる場合は、watch
コマンドもmonaca:preview
コマンド内に追加してください。
トランスパイルを利用するプロジェクトは、多くのモジュールに依存しているため、Monacaへの移行ができない可能性があります。予めご了承ください。
scriptプロパティ
下記は、webpackを利用した場合の設定内容の一例です。
開発用サーバーを起動するwebpack server
コマンドを dev
コマンドに設定。
ソースコードの変更検知の処理をwatch
コマンドに設定し、monaca:preview
コマンド内で2つの処理を登録しています。
"scripts": {
・・・
"monaca:preview": "npm run dev & npm run watch",
"dev": "webpack serve --port 8080 --open",
"watch": "webpack --watch --mode production",
・・・
}
最終更新
役に立ちましたか?