新しい Monaca CLI と Localkit
Monaca CLI 3.0 と Localkit の新機能
新しい Monaca CLI と Localkit は、CLI2.x 系から大幅に改善され、開発に柔軟性と堅牢性が向上しました。
プロジェクトごとの依存モジュール管理
新しいバージョンの Monaca により、開発に必要なすべてのモジュール群をプロジェクトごとに構成できるようになります。
グローバルモジュールは削除され、プロジェクトごとにモジュールがインストールされます。 これにより、各プロジェクトごとの開発環境のカスタマイズが可能となります。
以前のバージョンの CLI と Localkit では、アプリケーションの構築、バンドル、およびプレビューに使用される共通モジュールがグローバルにインストールされていました。 具体的にグローバルにインストールされていたものとしては、「webpack」、「browser-sync」、「babel」などがあります。 グローバルへのインストールでは、すべての Monaca プロジェクトが単一のモジュールとバージョンに依存するという制約がありました。
任意の Cordova バージョン選択
新しいリリースから、開発者はプロジェクトごとに異なる Cordova バージョンを使用できるようになりました。 Cordova は、各プロジェクトの devDependencies
の1つとしてインストールされています。
現時点では、Monaca クラウドのリモートビルドサーバーは、あらかじめ決められた Cordova ディストリビューションを使用しており、 ユーザー自身がバージョンを自由に変更することはできませんが、今後この制限を無くすよう取り組んでいます。
package.jsonでタスク設定
プロジェクトプレビューとビルドツールは、package.json のスクリプトに各タスクを定義することによりカスタマイズが可能です。 monaca preview
、monaca transpile
、monaca debug
コマンドは、基本的に package.json
で定義されたスクリプトを実行するだけです。
新しく追加された Monaca CLI コマンド
次のコマンドが CLI に追加されます。
monaca init
monaca update
このコマンドは、Monaca CLI 2 以下で作成したプロジェクトを更新するために使用します。
新しいバージョンへの移行
既存のプロジェクトは更新処理が必要となります。
Monaca クラウド IDE と Localkit ユーザー
プロジェクトを開くと、プロジェクトを自動的に更新するようにダイアログが表示されます。 ダイアログの指示にて更新を完了できます。
Monaca CLI ユーザー
Monaca CLI ユーザーの場合、monaca update を実行してプロジェクトを更新します。
既存のプロジェクトへの変更点
トランスパイルが不要なプロジェクト
package.json
に以下の変更がかかります。
monaca:preview
コマンドがscript
プロパティに追加されます。dev
コマンドがスクリプトに既に存在していない場合は、下の内容が追加されます。"dev": "browser-sync start -s www/ --watch --port 8080 --ui-port 8081"
browser-sync
とCordova
がdevDependencies
へ追加されます。
トランスパイルが必要なプロジェクト
package.json
に以下の変更がかかります。
monaca:preview
、monaca:transpile
、monaca:debug
コマンドがscript
プロパティに追加されます。dev
、build
、watch
コマンドは、それらが既に存在しない限りスクリプトに追加されます。Webpack
とCordova
を含む必須パッケージがdevDependencies
として追加されます。
その他の変更点
monaca_preview.js
: webpack と webpack-dev-server インスタンスを管理するためのスクリプト。webpack.dev.new.config.js
: 開発用の Webpack 構成。monaca_preview.js
で使用されます。webpack.dev.prod.config.js
: 本番用の Webpack 構成。
変更点の概要
変更点
以前のバージョン
最新バージョン
パッケージの依存関係
グローバル インストール
ローカル インストール (プロジェクトごと)
Cordova
グローバル インストール
ローカル インストール (プロジェクトごと)
monaca preview
グローバルにインストールされた browser-sync または webpack-dev-server でプレビュー
ローカルにインストールされた browser-sync または webpack-dev-server でプレビュー (デフォルト)
monaca transpile
グローバルにインストールされた Webpack でトランスパイル/ビルド
ローカルにインストールされた Webpack を使用 (デフォルト)
monaca debug
グローバルにインストールされた Webpack でファイル変更/ファイル監視
ローカルにインストールされた Webpack を使用 (デフォルト)
最終更新
役に立ちましたか?