React からの移行

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

前提条件

移行を開始する前に、を一読してみてください。
Monaca CLI を npm でグローバルにインストールする
```
$ npm install -g monaca
```

移行手順

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 デバッガーの使い方は、以下になります。

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

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

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

Monaca DebuggerとローカルPCは、同じネットワーク接続（LANまたはWi-Fi）に接続する必要があります。
ローカルPCのファイアウォールを無効にする。
1. 上の点を確認後、ペアリングを開始できます。ターミナルでプロジェクトディレクトリに移動し、 monaca debugと入力します。

    $ cd <project dir>
    $ monaca debug

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

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

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

アプリをビルドする

CLI コマンドのみを使用

プロジェクトディレクトリに移動します。
```
   $ cd <project dir>
```

Android Debug Buildを開始する

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

GUI での使用

プロジェクトディレクトリに移動します。
```
   $ cd <project dir>
```
ビルドウィンドウを開いてビルドを開始します。
```
   $ monaca remote build --browser
```
デバッグビルドはデフォルトで選択されています。Start Buildをクリックしてください。

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

前へIonic からの移行次へVue からの移行

最終更新 2 年前

役に立ちましたか？