新しい 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 プロジェクトとして初期化します。 このコマンドを使用すると、PhoneGap、Ionic、Angular、Vue からプロジェクトを Monaca へ移行できます。 詳細については、他のプラットフォームからの移行を参照してください。

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"

    "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 を使用 (デフォルト)