React からの移行

このページでは、Monaca CLIを使用して、 プロジェクトを Monaca に移行するための手順を説明します。このガイドを終えたら、Monaca を使って プロジェクトからアプリを実行、テスト、デバッグ、ビルドすることができます！始めましょう！

前提条件

1. 移行を開始する前に、キーポイントを一読してみてください。

2. Monaca CLI を npm でグローバルにインストールする

   $ npm install -g monaca

移行手順

1. Monaca CLIのインストール後、Monacaアカウントでログインしてください。

$ monaca login

2. プロジェクトディレクトリに移動します。

$ cd <project dir>
$ npm run eject
$ npm install

3. ウォッチスクリプトがないので、ウォッチスクリプトを下の手順で作成します。

• scripts/build.js を scripts/watch.jsとしてコピーする

• build 関数を下のように変更する

function build(previousFileSizes) {
  console.log('Creating an optimized production build...');
  let compiler = webpack(config);
  return new Promise((resolve, reject) => {
    compiler.watch({},(err, stats) => {
      if (err) {
        return reject(err);
      } else {
        copyPublicFolder();
      }
      console.log(stats.toString({
        chunks: false,
        colors: true
      }));
    });
  });
}

4. 次に、プロジェクトをMonacaのプロジェクト構造に変換するために monaca init を実行します。

$ monaca init
$ ...
$ ? Are you sure you want to continue initializing this project? Yes
$ ? Is it a transpilable project? Yes
$ ? Which command do you use to serve the app? node scripts/start.js
$ ? Which command do you use to build the app? node scripts/build.js
$ ? Which command do you use to watch the changes from your app? node scripts/watch.js

次のように package.json ファイルに3つの新しいコマンドを注入する必要があります：

"scripts": {
    "monaca:preview": "node scripts/start.js & node scripts/watch.js",
    "monaca:transpile": "node scripts/build.js",
    "monaca:debug": "node scripts/watch.js"
}

5. Config ビルド出力ディレクトリ

• 「scripts/build.js」と「scripts/watch.js」を開き、fs.emptyDirSync（paths.appBuild）を削除します。 関数のmeasureFileSizesBeforeBuildからビルドディレクトリが削除されないようにします。

• 「config/paths.js」を開き、appBuildディレクトリとservePathを次のように変更します

module.exports = {
    appBuild: resolveApp('www'),
    servedPath: './'
}

アプリをデバッグする

Monaca デバッガー は、端末上で Monaca アプリをリアルタイムでテスト、デバッグするためのアプリケーションです。 Monaca クラウド IDE で アプリを開発する場合、ファイルに加えられた変更は、保存後すぐに Monaca デバッガーに同期されます。

Monaca デバッガーの使い方は、以下になります。

1. Google Play または App Store から端末に Monaca デバッガーをインストールします。

Android エミュレータに Monaca デバッガーをインストールする場合は、 Android エミュレーター向け Monaca デバッガー を参照してください。

1. Monaca デバッガーを起動し、Monaca アカウントでサインインします。 Monaca クラウド IDE と同じアカウントを使用していることを確認してください。

1. デバッグを開始する前に、Monaca DebuggerとローカルPCをペアリングする必要があります。ペアリング前に次の点に注意してください。

• Monaca DebuggerとローカルPCは、同じネットワーク接続（LANまたはWi-Fi）に接続する必要があります。

• ローカルPCのファイアウォールを無効にする。

  1. 上の点を確認後、ペアリングを開始できます。ターミナルでプロジェクトディレクトリに移動し、 monaca debugと入力します。

    $ cd <project dir>
    $ monaca debug

1. 次に、デバッガとローカルPCをペアリングするよう促すポップアップメッセージがMonaca Debuggerの中に表示されます。

1. ペアリングが成功した場合、ローカルプロジェクト名がMonaca Debuggerの Local Projectsに表示されます。 ペアリングに失敗した場合は、Fail to Pair Monaca Debuggerを参照してください。

1. プロジェクトを実行するには、Monaca Debuggerのプロジェクト名をタップします.

2. プロジェクトがデバッガで実行されているはずです。プロジェクトのさまざまな操作を試してみてください！ その後、コードを変更して保存してみてください。次に、デバッガに反映された変更が表示されます。

デバッグを停止し、デバッガのペアを解除するには、 Ctrl + c を押します。

アプリをビルドする

CLI コマンドのみを使用

1. プロジェクトディレクトリに移動します。

      $ cd <project dir>

2. Android Debug Buildを開始する

      $ monaca remote build android --build-type=debug

GUI での使用

1. プロジェクトディレクトリに移動します。

      $ cd <project dir>

2. ビルドウィンドウを開いてビルドを開始します。

      $ monaca remote build --browser

3. デバッグビルドはデフォルトで選択されています。Start Buildをクリックしてください。

1. ビルドが完了するまでに数分かかることがあります。ビルドが正常に完了すると、次の画面が表示されます。アプリをデバイスにインストールするさまざまな方法を選択できます。