新しい Monaca CLI と Localkit
新しい Monaca CLI と Localkit は、CLI2.x 系から大幅に改善され、開発に柔軟性と堅牢性が向上しました。
新しいバージョンの Monaca により、開発に必要なすべてのモジュール群をプロジェクトごとに構成できるようになります。
グローバルモジュールは削除され、プロジェクトごとにモジュールがインストールされます。
これにより、各プロジェクトごとの開発環境のカスタマイズが可能となります。
以前のバージョンの CLI と Localkit では、アプリケーションの構築、バンドル、およびプレビューに使用される共通モジュールがグローバルにインストールされていました。 具体的にグローバルにインストールされていたものとしては、「webpack」、「browser-sync」、「babel」などがあります。 グローバルへのインストールでは、すべての Monaca プロジェクトが単一のモジュールとバージョンに依存するという制約がありました。
新しいリリースから、開発者はプロジェクトごとに異なる Cordova バージョンを使用できるようになりました。 Cordova は、各プロジェクトの
devDependencies の1つとしてインストールされています。現時点では、Monaca クラウドのリモートビルドサーバーは、あらかじめ決められた Cordova ディストリビュ ーションを使用しており、 ユーザー自身がバージョンを自由に変更することはできませんが、今後この制限を無くすよう取り組んでいます。
プロジェクトプレビューとビルドツールは、package.json のスクリプトに各タスクを定義することによりカスタマイズが可能です。
monaca preview、monaca transpile、monaca debug コマンドは、基本的に package.json で定義されたスクリプトを実行するだけです。次のコマンドが CLI に追加されます。
現在のプロジェクトを Monaca プロジェクトとして初期化します。
このコマンドを使用すると、
PhoneGap、Ionic、Angular、Vue からプロジェクトを Monaca へ移行できます。
詳細については、他のプラットフォームからの移行を参照してください。このコマンドは、Monaca CLI 2 以下で作成したプロジェクトを更新するために使用します。
既存のプロジェクトは更新処理が必要となります。
プロジェクトを開くと、プロジェクトを自動的に更新するようにダイアログが表示されます。
ダイアログの指示にて更新を完了できます。
Monaca CLI ユーザーの場合、monaca update を実行してプロジェクトを更新します。
package.json に以下の変更がかかります。monaca:previewコマンドがscriptプロパティに追加されます。devコマンドがスクリプトに既に存在していない場合は、下の内容が追加されます。"dev": "browser-sync start -s www/ --watch --port 8080 --ui-port 8081""scripts": {"monaca:preview": "npm run 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コマンドは、それらが既に存在しない限りスクリプトに追加されます。"scripts": {"monaca:preview": "npm run dev & npm run watch","dev": "PORT=8080 node ./monaca_preview.js","monaca:transpile": "npm run build","build": "webpack --config ./webpack.prod.new.config.js","monaca:debug": "npm run watch","watch": "webpack --watch --config ./webpack.prod.new.config.js"}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 構成。
webpack 設定ファイル ( webpack.dev.config.js または webpack.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 を使用 (デフォルト) |
最終更新 9mo ago