> For the complete documentation index, see [llms.txt](https://ja.docs.monaca.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ja.docs.monaca.io/release_notes/20180918_monaca_cli_3.0.md).

# 新しい 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 へ移行できます。\
詳細については、[他のプラットフォームからの移行](/products_guide/migration.md)を参照してください。

#### 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"`

    ```javascript
    "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` コマンドは、それらが既に存在しない限りスクリプトに追加されます。

  ```javascript
    "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 構成。

{% hint style="info" %}
webpack 設定ファイル ( webpack.dev.config.js または webpack.prod.config.js ) が変更されている場合は、 新しく生成された webpack 設定ファイルを変更する必要があります。設定ファイルを必要条件に合わせてください。
{% endhint %}

## 変更点の概要

| 変更点　　　　　　　　　         | 以前のバージョン                                                       | 最新バージョン                                                           |
| -------------------- | -------------------------------------------------------------- | ----------------------------------------------------------------- |
| **パッケージの依存関係**       | グローバル インストール                                                   | <p>ローカル インストール<br>(プロジェクトごと)</p>                                  |
| **Cordova**          | グローバル インストール                                                   | <p>ローカル インストール<br>(プロジェクトごと)</p>                                  |
| **monaca preview**   | **グローバル**にインストールされた browser-sync または webpack-dev-server でプレビュー | ローカルにインストールされた browser-sync または webpack-dev-server でプレビュー (デフォルト) |
| **monaca transpile** | **グローバル**にインストールされた Webpack でトランスパイル/ビルド                       | **ローカル**にインストールされた Webpack を使用 (デフォルト)                            |
| **monaca debug**     | **グローバル**にインストールされた Webpack でファイル変更/ファイル監視                     | **ローカル**にインストールされた Webpack を使用 (デフォルト)                            |