Monaca Docs
検索…
新しい 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 previewmonaca transpilemonaca debug コマンドは、基本的に package.json で定義されたスクリプトを実行するだけです。

次のコマンドが CLI に追加されます。

現在のプロジェクトを Monaca プロジェクトとして初期化します。 このコマンドを使用すると、PhoneGapIonicAngularVue からプロジェクトを 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-syncCordovadevDependencies へ追加されます。

package.json に以下の変更がかかります。
  • monaca:previewmonaca:transpilemonaca:debug コマンドが script プロパティに追加されます。
  • devbuildwatch コマンドは、それらが既に存在しない限りスクリプトに追加されます。
    "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"
    }
  • WebpackCordova を含む必須パッケージが 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 を使用 (デフォルト)
リンクのコピー
概要
Monaca CLI 3.0 と Localkit の新機能
プロジェクトごとの依存モジュール管理
任意の Cordova バージョン選択
package.jsonでタスク設定
新しく追加された Monaca CLI コマンド
新しいバージョンへの移行
既存のプロジェクトへの変更点
変更点の概要